微信小程序如何實現tab切換可滑動切換導航欄跟隨滾動

這篇文章給大家分享的是有關微信小程序如何實現tab切換可滑動切換導航欄跟隨滾動的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

解決過程

1.在想要實現這個問題的時候找了不少別人的博客看，主體頁面布局方面是比較統一的，tab導航欄使用<scroll-view>標簽，內容使用<swiper>，其中的使用方法和參數希望自行參考api文檔，不過多解釋

布局代碼如下：

wxml

<view class="container">
 <!-- tab導航欄 -->
 <!-- scroll-left屬性可以控制滾動條位置 -->
 <!-- scroll-with-animation滾動添加動畫過渡 -->
 <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
  <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
   <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">{{navItem.text}}</view>
  </block>  
 </scroll-view>
 <!-- 頁面內容 -->
 <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">  
  <swiper-item wx:for="{{[0,1,2,3,4,5,6,7,8]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">
   {{tabItem}}
  </swiper-item>
 </swiper>
</view>

wxss

/**index.wxss**/
page{
 width: 100%;
 height: 100%;
}
.container{
 width: 100%;
 height: 100%;
}
.nav {
 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;
}
.nav-item {
 width: 20%;
 display: inline-block;
 text-align: center;
}
.nav-item.active{
 color: red;
}
.tab-box{
 background: greenyellow;
 padding-top: 80rpx;
 height: 100%;
 box-sizing: border-box;
}
.tab-content{
 overflow-y: scroll;
}

js

//index.js
//獲取應用實例
const app = getApp()

Page({
 data: {
  motto: 'Hello World',
  userInfo: {},
  hasUserInfo: false,
  canIUse: wx.canIUse('button.open-type.getUserInfo'),
  navData:[
   {
    text: '首頁'
   },
   {
    text: '健康'
   },
   {
    text: '情感'
   },
   {
    text: '職場'
   },
   {
    text: '育兒'
   },
   {
    text: '糾紛'
   },
   {
    text: '青蔥'
   },
   {
    text: '上課'
   },
   {
    text: '下課'
   }
  ],
  currentTab: 0,
  navScrollLeft: 0
 },
 //事件處理函數
 onLoad: function () {
  if (app.globalData.userInfo) {
   this.setData({
    userInfo: app.globalData.userInfo,
    hasUserInfo: true
   })
  } else if (this.data.canIUse) {
   // 由于 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
   // 所以此處加入 callback 以防止這種情況
   app.userInfoReadyCallback = res => {
    this.setData({
     userInfo: res.userInfo,
     hasUserInfo: true
    })
   }
  } else {
   // 在沒有 open-type=getUserInfo 版本的兼容處理
   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; 
  //每個tab選項寬度占1/5
  var singleNavWidth = this.data.windowWidth / 5;
  //tab選項居中       
  this.setData({
   navScrollLeft: (cur - 2) * singleNavWidth
  })  
  if (this.data.currentTab == cur) {
   return false;
  } else {
   this.setData({
    currentTab: cur
   })
  }
 },
 switchTab(event){
  var cur = event.detail.current;
  var singleNavWidth = this.data.windowWidth / 5;
  this.setData({
   currentTab: cur,
   navScrollLeft: (cur - 2) * singleNavWidth
  });
 }
})

頁面代碼如上面三部分，可以直接新建一項目進行測試

效果圖如下

注意事項

在處理頂部tab導航跟隨底部頁面滑動的時候遇到一個問題，就是在給<scroll-view>中的scrll-left賦值的時候遇到的問題

邏輯上講初始時tab導航下標小于2時導航欄不滾動，當大于2時向左滑動，以使被選中的導航欄居中，但是當最左側的選項因為左滑看不到后，我又點擊左側選項希望導航往右滑動，能夠看到左邊的導航，按上面的js代碼計算scroll-left會產生負值，但是scroll-left即使為負值，但是滾動條不會向左縮進去，所以即使為負值，相當于為0，當時做的時候一直在思考這個怎么用邏輯解決，想著要寫各種判斷，計算距離，結果到最后一句代碼直接賦值就搞定了，也是很無語。

感謝各位的閱讀！關于“微信小程序如何實現tab切換可滑動切換導航欄跟隨滾動”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！