wxml部分
// 導(dǎo)航以上的內(nèi)容
<view id='header' style='height:200rpx;background-color:#00f;'></view>
// 導(dǎo)航
<view class="list_item {{curClass}}">
<view class="all_item {{checkedType == 'all'?'checked':''}}" catchtap='changeType' data-v="all">全部</view>
<view class="income {{checkedType == 'in'?'checked':''}}" catchtap='changeType' data-v="in">收入</view>
<view class="payfor {{checkedType == 'out'?'checked':''}}" catchtap='changeType' data-v="out">支出</view>
</view>
// 其余內(nèi)容
<view style='height:2000rpx'></view>
js部分
Page({
// 頁面的初始數(shù)據(jù)
data: {
checkedType: 'all',
curClass: '',
},
// 切換導(dǎo)航
changeType(e) {
this.setData({
checkedType: e.currentTarget.dataset.v
});
},
// 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
onReady: function () {
var that = this;
wx.createSelectorQuery().select('#header').boundingClientRect(function(rect){
rect.height; // 節(jié)點(diǎn)高度
}).exec(function(res){
that.headerHeight = res[0].height;
})
wx.createSelectorQuery().select('.list_item').boundingClientRect(function (rect) {
rect.height; // 節(jié)點(diǎn)高度
}).exec(function (res) {
that.itemHeight = res[0].height;
})
},
// 頁面滾動(dòng)
onPageScroll(e) {
if (e.scrollTop >= this.headerHeight && !this.data.curClass){
// 當(dāng)頁面頂端距離大于一定高度時(shí)
this.setData({
curClass:'item_fix'
})
} else if (e.scrollTop <= this.headerHeight && this.data.curClass){
this.setData({
curClass: ''
})
}
}
})
wxss內(nèi)容
……
.item_fix{
position: fixed;
}
可下載 → 代碼片段
