本文介绍了一种使用WXML和JS结合的方式实现页面滚动时导航栏高亮的效果。通过监听滚动条的位置并计算各部分内容的相对位置来动态更新导航栏的状态，实现了平滑的滚动效果和导航定位。
wxml:
<view class="tab-item {{top<block_2ScrollTop-60?'active':''}}" bindtap="toblock1">商品</view>
<view class="tab-item {{top>=block_2ScrollTop-60&&top<block_3ScrollTop-60?'active':''}}" bindtap="toblock2">评分</view>
<view class="tab-item {{top>=block_3ScrollTop-60?'active':''}}"bindtap="toblock3">详情</view>
<scroll-view style='height:{{winHeight}}' scroll-y="true" class="scoll-h" >
<block>
<view id='block_1'>
</view>
</block>
<block>
<view id='block_2'>
</view>
</block>
<block >
<view id='block_3'>
</view>
</block>
</scroll-view>
js:
var that = this;
// 高度自适应
wx.getSystemInfo({
success: function (res) {
var clientHeight = res.windowHeight,
clientWidth = res.windowWidth,
rpxR = 750 / clientWidth;
var calc = clientHeight * rpxR - 180;
that.setData({
winHeight: calc
});
}
});
var query = wx.createSelectorQuery()
query.select('#tab-con').boundingClientRect(function (res) {
that.setData({
tabScrollTop: res.top-60
})
}).exec()
query.select('#block_1').boundingClientRect(function (res) {
that.setData({
block_1ScrollTop: res.top
})
}).exec()
query.select('#block_2').boundingClientRect(function (res) {
that.setData({
block_2ScrollTop: res.top
})
}).exec()
query.select('#block_3').boundingClientRect(function (res) {
that.setData({
block_3ScrollTop: res.top
})
console.log(res.top)
}).exec()
onPageScroll: function (e) { // 获取滚动条当前位置
console.log(e)
this.setData({
top: e.scrollTop
})
if (e.scrollTop > this.data.tabScrollTop) {
this.setData({
tabFixed: true
})
console.log("我锁定了")
} else {
this.setData({
tabFixed: false
})
}
},
toblock1:function(){
wx.pageScrollTo({ scrollTop: this.data.block_1ScrollTop})
},
toblock2: function () {
wx.pageScrollTo({ scrollTop: this.data.block_2ScrollTop})
},
toblock3: function () {
wx.pageScrollTo({ scrollTop: this.data.block_3ScrollTop})
}
工作比较忙,只能提供一个思路了,有空再整理吧.......
扫一扫
3568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
