Un exemple d'analyse de la façon de réaliser une commutation coulissante gauche et droite dans l'onglet de défilement de l'applet WeChat

Cet article présente principalement les informations pertinentes sur l'onglet de défilement de l'applet WeChat pour obtenir une commutation coulissante vers la gauche et la droite. Voici des exemples de mise en œuvre pour vous aider à réaliser une telle fonction. Les amis dans le besoin peuvent se référer à

WeChat L'onglet de défilement du mini programme réalise une commutation coulissante vers la gauche et la droite

Effet :

L'effet final est comme ci-dessus. Problèmes :

1. Il y a 8 titres d'onglets au total, ils ne peuvent donc pas être affichés sur un seul écran.

2. Lorsque la zone de contenu de l'onglet glisse vers la gauche et la droite pour basculer, le titre de l'onglet sera immédiatement marqué (actif).
3. Lorsque le titre actif n'est pas affiché sur l'écran actuel, faites-le s'afficher sur l'écran actuel.

1. structure wxml

Les titres des onglets sont huit consécutifs, le composant scroll-view est donc utilisé pour les faire défiler horizontalement.

Le contenu des onglets peut être basculé vers la gauche et la droite en glissant, à l'aide du composant swiper

Afin d'être paresseux, les données sont répétées via wx:pour la traversée.

Instructions :

1. La définition de l'attribut data-current est utilisée pour : lorsque l'on clique sur l'élément actuel, la valeur cible du clic est obtenue en traitant e.dataset. actuel dans l'événement de clic swichNav.

2. Le composant actuel du composant swiper est utilisé pour contrôler quelle page est actuellement affichée
3 Le composant swiper lie l'événement de changement switchTab et obtient la page actuelle via e.detail.current

<view >
  <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
    <view class="tab-item {{currentTab==0?&#39;active&#39;:&#39;&#39;}}" data-current="0" bindtap="swichNav">健康</view>
    <view class="tab-item {{currentTab==1?&#39;active&#39;:&#39;&#39;}}" data-current="1" bindtap="swichNav">情感</view>
    <view class="tab-item {{currentTab==2?&#39;active&#39;:&#39;&#39;}}" data-current="2" bindtap="swichNav">职场</view>
    <view class="tab-item {{currentTab==3?&#39;active&#39;:&#39;&#39;}}" data-current="3" bindtap="swichNav">育儿</view>
    <view class="tab-item {{currentTab==4?&#39;active&#39;:&#39;&#39;}}" data-current="4" bindtap="swichNav">纠纷</view>
    <view class="tab-item {{currentTab==5?&#39;active&#39;:&#39;&#39;}}" data-current="5" bindtap="swichNav">青葱</view>
    <view class="tab-item {{currentTab==6?&#39;active&#39;:&#39;&#39;}}" data-current="6" bindtap="swichNav">全部</view>
    <view class="tab-item {{currentTab==7?&#39;active&#39;:&#39;&#39;}}" data-current="7" bindtap="swichNav">其他</view>
  </scroll-view>
  <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab"
   style="height:{{winHeight}}rpx">
    <swiper-item wx:for="{{[0,1,2,3,4,5,6,7]}}">
      <scroll-view scroll-y="true" class="scoll-h" >
        <block wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="*this">
          <view class="item-ans">
            <view class="avatar">
              <image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
            </view>
            <view class="expertInfo">
              <view class="name">欢颜</view>
              <view class="tag">知名情感博主</view>
              <view class="answerHistory">134个回答，2234人听过 </view>
            </view>
            <navigator url="/pages/askExpert/expertDetail" class="askBtn">问TA</navigator> 
          </view>
        </block>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

2. Partie JS

Lorsque l'applet WeChat est développée, je pense personnellement qu'elle est assez similaire à Vue, qui utilise des données pour piloter la mise à jour de la vue. Par conséquent, dans les petits programmes, vous ne pouvez pas exploiter directement le DOM et, bien sûr, vous ne pouvez pas utiliser des bibliothèques telles que jquery.

var app = getApp();
Page({
  data:{
    winHeight:"",//窗口高度
    currentTab:0, //预设当前项的值
    scrollLeft:0, //tab标题的滚动条位置
    expertList:[{ //假数据
      img:"avatar.png",
      name:"欢顔",
      tag:"知名情感博主",
      answer:134,
      listen:2234
    }]
  },
  // 滚动切换标签样式
  switchTab:function(e){
    this.setData({
      currentTab:e.detail.current
    });
    this.checkCor();
  },
  // 点击标题切换当前页时改变样式
  swichNav:function(e){
    var cur=e.target.dataset.current;
    if(this.data.currentTaB==cur){return false;}
    else{
      this.setData({
        currentTab:cur
      })
    }
  },
  //判断当前滚动超过一屏时，设置tab标题滚动条。
  checkCor:function(){
   if (this.data.currentTab>4){
    this.setData({
     scrollLeft:300
    })
   }else{
    this.setData({
     scrollLeft:0
    })
   }
  },
  onLoad: function() { 
    var that = this; 
    // 高度自适应
    wx.getSystemInfo( { 
      success: function( res ) { 
        var clientHeight=res.windowHeight,
          clientWidth=res.windowWidth,
          rpxR=750/clientWidth;
       var calc=clientHeight*rpxR-180;
        console.log(calc)
        that.setData( { 
          winHeight: calc 
        }); 
      } 
    });
  }, 
  footerTap:app.footerTap
})

3. style wxss

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!