這篇文章主要介紹了微信小程序頁面向下滾動時tab欄固定頁面頂部實例講解，文中圖文實例講解的很透徹，有需要的同學可以參考下
先看一下效果圖：
index.wxml
<view class='{{tabIsTop ? "fixedTop" : ""}}'>
<i-tabs tabcurrent="{{tabcurrent}}" color="#FF0000" bindchange="tabChange">
<i-tab key="tab1" title="車主圈"></i-tab>
<i-tab key="tab2" title="行業(yè)新聞"></i-tab>
<i-tab key="tab3" title="養(yǎng)護寶典"></i-tab>
<i-tab key="tab4" title="自駕游"></i-tab>
</i-tabs>
</view>特別說明：這里使用的tab標簽頁是iviewui的框架，地址：https://weapp.iviewui.com/components/tabs
index.wxss
.fixedTop {
width: 100%;
position: fixed;
top: 0;
z-index: 99;
}index.js
Page({
/**
* 頁面的初始數據
*/
data: {
tabcurrent: 'tab1',
tabIsTop:false,
scrollTop: 0,
},
/**
* 生命周期函數--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
ontabChange(event) {
this.setData({ active: event.detail });
},
//監(jiān)聽屏幕滾動 判斷上下滾動
onPageScroll: function (ev) {
var _this = this;
//當滾動的top值最大或最小時，為什么要做這一步是因為在手機實測小程序的時候會發(fā)生滾動條回彈，所以為了處理回彈，設置默認最大最小值
if (ev.scrollTop <= 0) {
// 滾動到最頂部
ev.scrollTop = 0;
this.setData({ tabIsTop: false });
} else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
// 滾動到最底部
ev.scrollTop = wx.getSystemInfoSync().windowHeight;
}
//判斷瀏覽器滾動條上下滾動
if (ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
//向下滾動
this.setData({ tabIsTop: true });
} else {
//向上滾動
}
//給scrollTop重新賦值
setTimeout(function () {
_this.setData({
scrollTop: ev.scrollTop
})
}, 0)
},
})
