微信小程序實現(xiàn)tab左右切換效果

更新時間：2020年11月15日 15:51:24 作者：置二

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)tab左右切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現(xiàn)tab左右切換展示的具體代碼，供大家參考，具體內(nèi)容如下

分析

1、設置data-current屬性用于：點擊當前項時，通過點擊事件swichNav中處理e.dataset.current取到點擊的目標值。

2、swiper組件的current組件用于控制當前顯示哪一頁

3、swiper組件綁定change事件switchTab，通過e.detail.current拿到當前頁

wxml:

<view class="record-box">
 <view class="nav">
  <scroll-view scroll-x="true" class="navbar-box" srcoll-left="{{navScrollLeft}}"
   srcoll-width-animation="{{true}}">
   <block wx:for="{{recordMain}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
    <view class="nav-item {{currentTab == idx ? 'text' : ''}}" data-current="{{idx}}" 
     bindtap="switchNav">
     <label>{{navItem.text}}</label>
    </view>
   </block>
  </scroll-view>
 </view>
</view>
------------------------------------------------
<view class="record-ft">
 <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
  <swiper-item wx:for="{{[0,1,2,3]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx"
    class="tab-cnetent">
    <block wx:for="{{tabContent}}" wx:for-item="tabItem" wx:key=" ">
     <view class="padding-box" bindtap="navigateUrl" data-url="/pages/index/index">
      <view class="weui-list-box weui-main">
       <view class="weui-list-bd">
        <view class="img-box">
         <image src="{{tabItem}}" class="img" mode="widthFix"></image>
        </view>
       </view>
       <view class="weui-list-ft">
        <view class="weui-title">
         <view class="text-flow clamp-xs font-sm">{{tabItem.title}}</view>
         <view class="text">
          <laber>{{tabItem.text}}</laber>
          <laber>{{tabItem.text}}</laber>
         </view>
        </view>
        <view class="weui-cost">
         <view>￥<laber>{{tanItem.cost}}</laber></view>
        </view>
       </view>
      </view>
     </view>
    </block>
  </swiper-item>
 </swiper>
</view>

JS

Page ({
 const app = getApp()
 data: {
  recordMian: [
   {
    title: "插畫藝術"
   },
   {
    title: "工藝作品"
   },
   {
    title: "服裝藝術"
   },
   {
    title: "三維建模"
   },
  ],
  tabContent: [
   {
    title: "臺燈臥室床頭 簡約現(xiàn)代書房 北歐宜家創(chuàng)意裝飾個性圓球臺燈床頭燈",
    text: "臺燈",
    cost: "1255",
    imgUrl: "http://img.weiye.me/zcimgdir/album/file_59b8f7b66ba7f.jpg",
   },
   {
    title: "雪域冰雪天地8寸牛乳芝士蛋糕",
    text: "蛋糕",
    cost: "15",
    imgUrl: "http://img.weiye.me/zcimgdir/album/file_59b8f7b66ba7f.jpg",
   },
  ],
  currentTab: 0,
  navScrollLeft: 0
 },
 // 事件處理函數(shù)
 onLoad: function() {
  // 控制record-box隨鼠標切換調(diào)整位置
  if (app.globalData.userInfo) {
   this.setData({
    userInfo: app.globalData.userInfo,
    hasUserInfo: true
   })
   } else if (this.data.canIUse) {
    app.userInfoReadyCallback = res => {
     this.setData({
      userInfo: res.userInfo,
      hasUserInfo: true
     })
    }
   }
  else {
   wx.getUserInfo({
    success: res => {
     app.globalData.userInfo = res.userInfo
     this.setData({
      userInfo: res.userInfo,
      hasUserInfo: true
     })
    }
   })
  }
  wx.getSystemInfo({
   success: (res) => {
    this.setData({
     pixelRatio: res.pixelRatio,
     windowHeight: res.windowHeight,
     windowWidth: res.windowWidth
    })
   }
  })
 },
 // 滑動事件
 // 點擊標題切換當前頁時改變樣式
 switchNav(event) {
  var cur = event.currentTarget.dataset.current;
  if (this.data.currentTab == cur) {
   return false;
  } else {
   this.setData({
    currentTab: cur
   })
  }
 },
 // 滾動切換標簽樣式 
 switchTab(event) {
  var cur = evnet.detail.current;
  var singeNavWidth = this.data.windowWidth / 5;
  this.setData({
   currentTab: cur,
   navScrollLeft: (cur - 2) * singleNavWidth
  });
 }
})

效果圖：