Eine Beispielanalyse, wie das Umschalten nach links und rechts auf der Scroll-Registerkarte des WeChat-Applets realisiert wird

In diesem Artikel werden hauptsächlich die relevanten Informationen zum Scrollen von Tabs nach links und rechts vorgestellt. Hier finden Sie Implementierungsbeispiele, die Ihnen bei der Implementierung einer solchen Funktion helfen können

WeChat Der Mini-Programm-Scrolling-Tab ermöglicht das Schieben nach links und rechts.

Wirkung:

Der endgültige Effekt ist wie oben. Probleme:

1. Es gibt insgesamt 8 Registerkartentitel, sodass diese nicht auf einem Bildschirm angezeigt werden können.
2. Wenn der Tab-Inhaltsbereich nach links und rechts verschoben wird, um zu wechseln, wird der Tab-Titel sofort markiert (aktiv).
3. Wenn der aktive Titel nicht auf dem aktuellen Bildschirm angezeigt wird, lassen Sie ihn auf dem aktuellen Bildschirm anzeigen.

1. WXML-Struktur

Tab-Titel sind acht in einer Reihe, daher wird die Scroll-View-Komponente verwendet, um sie horizontal scrollbar zu machen.

Tab-Inhalte können durch Schieben nach links und rechts mit der Swiper-Komponente gewechselt werden.

Der Einfachheit halber werden die Daten durch wx:for Traversal wiederholt.

Anweisungen:

1. Das Festlegen des data-current-Attributs wird verwendet, um: Wenn auf das aktuelle Element geklickt wird, wird der Zielwert des Klicks durch die Verarbeitung von e.dataset ermittelt. aktuell im Klickereignis swichNav.
2. Die aktuelle Komponente der Swiper-Komponente wird verwendet, um zu steuern, welche Seite aktuell angezeigt wird
3. Die Swiper-Komponente bindet das Änderungsereignis switchTab und ruft die aktuelle Seite über e.detail.current ab

<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. JS-Teil

Wenn das WeChat-Applet entwickelt wird, habe ich persönlich das Gefühl, dass es Vue ziemlich ähnlich ist. Dabei werden Daten verwendet, um die Aktualisierung der Ansicht voranzutreiben. Daher können Sie in kleinen Programmen das DOM nicht direkt bedienen und natürlich auch keine Bibliotheken wie jquery verwenden.

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. WXSS-Stil

.tab-h{
  height: 80rpx;width: 100%; box-sizing: border-box;overflow: hidden;line-height: 80rpx;background: #F7F7F7; font-size: 16px; white-space: nowrap;position: fixed;top: 0; left: 0; z-index: 99;}
.tab-item{margin:0 36rpx;display: inline-block;}
.tab-item.active{color: #4675F9;position: relative;}
.tab-item.active:after{ content: "";display: block;height: 8rpx;width: 52rpx;background: #4675F9;position: absolute; bottom: 0;left: 5rpx;border-radius: 16rpx;}
.item-ans{ width: 100%;display: flex; flex-grow: row no-wrap;justify-content: space-between; padding: 30rpx;box-sizing: border-box; height: 180rpx;align-items: center;border-bottom: 1px solid #F2F2F2;}
.avatar{width: 100rpx;height: 100rpx;position: relative;padding-right: 30rpx;}
.avatar .img{width: 100%;height: 100%;}
.avatar .doyen{width: 40rpx;height: 40rpx;position: absolute;bottom: -2px;right: 20rpx;}
.expertInfo{font-size: 12px;flex-grow: 2;color: #B0B0B0;line-height: 1.5em;}
.expertInfo .name{font-size: 16px;color:#000;margin-bottom: 6px;}
.askBtn{ width: 120rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 14px; border-radius: 60rpx;border: 1px solid #4675F9; color:#4675F9;}
.tab-content{margin-top: 80rpx;}
.scoll-h{height: 100%;}

Das obige ist der detaillierte Inhalt vonEine Beispielanalyse, wie das Umschalten nach links und rechts auf der Scroll-Registerkarte des WeChat-Applets realisiert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!