当我们页面滑动到一定位置的时候,让这个组件固定,之后再滑动到一定位置时候,回归原页面,还有点击立即到最顶部效果
如果是移动端的话,可以用一个position: sticky;不过要考虑兼容性
比如,让这个元素进行吸顶展示:
<view class="tabs" id="boxFixed" :class="{'is_fixed' : isfixed}">
<u-tabs :list="list4" @click="clickTabs"></u-tabs>
</view>
data(){
return{
menutop:'' //组件距离顶部的距离
}
}
// 吸顶
.is_fixed {
position: fixed;
left: 0;
top: 60rpx;
right: 0;
}
监听元素到顶部的距离
onLoad() {
// 监听筛选组件距离顶部的距离
const query = uni.createSelectorQuery()
query.select('#boxFixed').boundingClientRect()
query.exec((res) => {
console.log(res)
this.menutop = res[0].top
})
},
监听页面滚动的距离
// 监听页面滚动距离
onPageScroll(e) {
// 如果页面滚动的高度大于筛选组件距离顶部的高度,那就置顶,反之不置顶
if (e.scrollTop > this.menutop) {
this.isfixed = true
} else {
this.isfixed = false
}
},
点击这个组件,它立即回到顶部
<view @click="poll()" :catchtouchmove="true">
<Delicacy id="boxFixed" :class="{'is_fixed' : isfixed}"></Delicacy>
</view>
data(){
return{
topdata:''
}
}
methods:{
// 回到顶部
poll() {
uni.pageScrollTo({
scrollTop: this.topdata + 2,
duration: 300
})
},
},
onLoad() {
// 监听筛选组件距离顶部的距离
const query = uni.createSelectorQuery()
query.select('#boxFixed').boundingClientRect()
query.exec((res) => {
this.topdata = res[0].top
})
},