uniapp导航栏吸顶效果
【代码】uniapp导航栏吸顶效果。
·
项目是vue2框架
要确认盒子的唯一标识(最好是id)
<view id='navbar'>//需要在获取到顶部距离的盒子上确定唯一标识,最好是id,类名也行
<view class="box-1" >
<view class="box-2">
<view class="box-2-Word">
<text class=" box-2Word" selectable space="nbsp">品种 品名/规格/等级 数量 分配</text>
</view>
</view>
</view>
</view>
onReady: function () {
let that = this;
let query = wx.createSelectorQuery()
query.select('#navbar').boundingClientRect((res)=>{ //#navbar盒子的唯一标识
that.tabScrollTop= res.top
console.log('元素距离顶部的距离' + res.top)
}).exec()
},
onPageScroll(e){ // 页面滚动监听
if (e.scrollTop > this.tabScrollTop) {
this.isTopFixed=true //这个需要配合css的 position:fixed;使用
} else {
this.isTopFixed=false
}
},
吸顶效果
更多推荐
已为社区贡献2条内容
所有评论(0)