微信小程序頁面向下滾動時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標(biāo)簽頁是iviewui的框架,地址:https://weapp.iviewui.com/components/tabs
index.wxss
.fixedTop {
width: 100%;
position: fixed;
top: 0;
z-index: 99;
}
index.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
tabcurrent: 'tab1',
tabIsTop:false,
scrollTop: 0,
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
ontabChange(event) {
this.setData({ active: event.detail });
},
//監(jiān)聽屏幕滾動 判斷上下滾動
onPageScroll: function (ev) {
var _this = this;
//當(dāng)滾動的top值最大或最小時,為什么要做這一步是因為在手機實測小程序的時候會發(fā)生滾動條回彈,所以為了處理回彈,設(shè)置默認最大最小值
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)
},
})
到此這篇關(guān)于微信小程序頁面向下滾動時tab欄固定頁面頂部實例講解的文章就介紹到這了,更多相關(guān)微信小程序頁面向下滾動時tab欄固定頁面頂部內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決Laravel 不能創(chuàng)建 migration 的問題
今天小編就為大家分享一篇解決Laravel 不能創(chuàng)建 migration 的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Linux下將excel數(shù)據(jù)導(dǎo)入到mssql數(shù)據(jù)庫中的方法
在Linux下把excel數(shù)據(jù)導(dǎo)入到mssql數(shù)據(jù)庫中,這實在是很搞笑的一個活動!幾乎很少有程序員研究過這個問題吧?如此變態(tài)的問題,估計我是第一個研究的!呵呵,完全是自找苦吃~~,但是今天完了這項太有挑戰(zhàn)性的工作!2010-02-02
阿里云Win2016安裝Apache和PHP環(huán)境圖文教程
本文給大家講述的是在阿里云的WindowsServer2016上部署Apache和PHP的web環(huán)境,步驟非常細致,強烈推薦給大家2018-03-03
PHP中static關(guān)鍵字以及與self關(guān)鍵字的區(qū)別
這篇文章主要介紹了PHP中static關(guān)鍵字以及與self關(guān)鍵字的區(qū)別,本文講解了static關(guān)鍵字的定義、遲綁定(Late Static Bindings)、以及與self關(guān)鍵字的區(qū)別等內(nèi)容,需要的朋友可以參考下2015-07-07
PHP SPL標(biāo)準庫之?dāng)?shù)據(jù)結(jié)構(gòu)棧(SplStack)介紹
這篇文章主要介紹了PHP SPL標(biāo)準庫之?dāng)?shù)據(jù)結(jié)構(gòu)棧(SplStack)介紹,棧(Stack)是一種特殊的線性表,因為它只能在線性表的一端進行插入或刪除元素(即進棧和出棧),需要的朋友可以參考下2015-05-05

