微信小程序頁面向下滾動時(shí)tab欄固定頁面頂部實(shí)例講解
先看一下效果圖:

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>
特別說明:這里使用的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值最大或最小時(shí),為什么要做這一步是因?yàn)樵谑謾C(jī)實(shí)測小程序的時(shí)候會發(fā)生滾動條回彈,所以為了處理回彈,設(shè)置默認(rèn)最大最小值
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)于微信小程序頁面向下滾動時(shí)tab欄固定頁面頂部實(shí)例講解的文章就介紹到這了,更多相關(guān)微信小程序頁面向下滾動時(shí)tab欄固定頁面頂部內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決Laravel 不能創(chuàng)建 migration 的問題
今天小編就為大家分享一篇解決Laravel 不能創(chuàng)建 migration 的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
ajax php傳遞和接收變量實(shí)現(xiàn)思路及代碼
在實(shí)際應(yīng)用中會遇到這種情況:ajax與php之間傳遞和接收變量,為了實(shí)現(xiàn)這一功能應(yīng)用,很多新手朋友們,只能望洋興嘆啊,于是本人搜集整理一些實(shí)用技巧,曬出來和大家分享,希望可以幫助你們2012-12-12
超詳細(xì)的php用戶注冊頁面填寫信息完整實(shí)例(附源碼)
這篇文章主要介紹了一個(gè)超詳細(xì)的php用戶注冊頁面填寫信息完整實(shí)例,內(nèi)容包括郵箱自動匹配、密碼強(qiáng)度驗(yàn)證以及防止表單重復(fù)等,小編特別喜歡這篇文章,推薦給大家。2015-11-11
Linux下將excel數(shù)據(jù)導(dǎo)入到mssql數(shù)據(jù)庫中的方法
在Linux下把excel數(shù)據(jù)導(dǎo)入到mssql數(shù)據(jù)庫中,這實(shí)在是很搞笑的一個(gè)活動!幾乎很少有程序員研究過這個(gè)問題吧?如此變態(tài)的問題,估計(jì)我是第一個(gè)研究的!呵呵,完全是自找苦吃~~,但是今天完了這項(xiàng)太有挑戰(zhàn)性的工作!2010-02-02
阿里云Win2016安裝Apache和PHP環(huán)境圖文教程
本文給大家講述的是在阿里云的WindowsServer2016上部署Apache和PHP的web環(huán)境,步驟非常細(xì)致,強(qiáng)烈推薦給大家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
解決Laravel5.2 Auth認(rèn)證退出失效的問題
今天在做登陸認(rèn)證時(shí)遇到了個(gè)問題,以為是我的解決方法,希望對大家有所幫助吧2019-10-10
PHP SPL標(biāo)準(zhǔn)庫之?dāng)?shù)據(jù)結(jié)構(gòu)棧(SplStack)介紹
這篇文章主要介紹了PHP SPL標(biāo)準(zhǔn)庫之?dāng)?shù)據(jù)結(jié)構(gòu)棧(SplStack)介紹,棧(Stack)是一種特殊的線性表,因?yàn)樗荒茉诰€性表的一端進(jìn)行插入或刪除元素(即進(jìn)棧和出棧),需要的朋友可以參考下2015-05-05
Django中的cookie與session操作實(shí)例代碼
本文通過示例代碼給大家介紹了Django中的cookie與session操作,需要的朋友參考下吧2017-08-08

