先看一下效果圖：
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)護(hù)寶典">/i-tab>
i-tab key="tab4" title="自駕游">/i-tab>
/i-tabs>
/view>
特別說(shuō)明：這里使用的tab標(biāo)簽頁(yè)是iviewui的框架，地址：https://weapp.iviewui.com/components/tabs
index.wxss
.fixedTop {
width: 100%;
position: fixed;
top: 0;
z-index: 99;
}
index.js
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
tabcurrent: 'tab1',
tabIsTop:false,
scrollTop: 0,
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function (options) {
},
ontabChange(event) {
this.setData({ active: event.detail });
},
//監(jiān)聽屏幕滾動(dòng) 判斷上下滾動(dòng)
onPageScroll: function (ev) {
var _this = this;
//當(dāng)滾動(dòng)的top值最大或最小時(shí)，為什么要做這一步是因?yàn)樵谑謾C(jī)實(shí)測(cè)小程序的時(shí)候會(huì)發(fā)生滾動(dòng)條回彈，所以為了處理回彈，設(shè)置默認(rèn)最大最小值
if (ev.scrollTop = 0) {
// 滾動(dòng)到最頂部
ev.scrollTop = 0;
this.setData({ tabIsTop: false });
} else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
// 滾動(dòng)到最底部
ev.scrollTop = wx.getSystemInfoSync().windowHeight;
}
//判斷瀏覽器滾動(dòng)條上下滾動(dòng)
if (ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
//向下滾動(dòng)
this.setData({ tabIsTop: true });
} else {
//向上滾動(dòng)
}
//給scrollTop重新賦值
setTimeout(function () {
_this.setData({
scrollTop: ev.scrollTop
})
}, 0)
},
})
到此這篇關(guān)于微信小程序頁(yè)面向下滾動(dòng)時(shí)tab欄固定頁(yè)面頂部實(shí)例講解的文章就介紹到這了,更多相關(guān)微信小程序頁(yè)面向下滾動(dòng)時(shí)tab欄固定頁(yè)面頂部?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
標(biāo)簽：克拉瑪依 白城 鷹潭 鶴崗 六安 唐山 遼陽(yáng) 柳州
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《微信小程序頁(yè)面向下滾動(dòng)時(shí)tab欄固定頁(yè)面頂部實(shí)例講解》，本文關(guān)鍵詞 微信,小,程序,頁(yè)面,向下,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
