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

成都創(chuàng)新互聯(lián)公司服務項目包括萬榮網(wǎng)站建設(shè)、萬榮網(wǎng)站制作、萬榮網(wǎng)頁制作以及萬榮網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，萬榮網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到萬榮省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

解決過程

1.在想要實現(xiàn)這個問題的時候找了不少別人的博客看，主體頁面布局方面是比較統(tǒng)一的，tab導航欄使用標簽，內(nèi)容使用，其中的使用方法和參數(shù)希望自行參考api文檔，不過多解釋

布局代碼如下：

wxml

 
 
 
 
  
   {{navItem.text}}
    
 
 
   
  
   {{tabItem}}
  
 

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
 },
 //事件處理函數(shù)
 onLoad: function () {
  if (app.globalData.userInfo) {
   this.setData({
    userInfo: app.globalData.userInfo,
    hasUserInfo: true
   })
  } else if (this.data.canIUse) {
   // 由于 getUserInfo 是網(wǎng)絡請求，可能會在 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時向左滑動，以使被選中的導航欄居中，但是當最左側(cè)的選項因為左滑看不到后，我又點擊左側(cè)選項希望導航往右滑動，能夠看到左邊的導航，按上面的js代碼計算scroll-left會產(chǎn)生負值，但是scroll-left即使為負值，但是滾動條不會向左縮進去，所以即使為負值，相當于為0，當時做的時候一直在思考這個怎么用邏輯解決，想著要寫各種判斷，計算距離，結(jié)果到最后一句代碼直接賦值就搞定了，也是很無語。

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