这里先说一下,,筛选的插件我用的是DCloud插件市场的,,,注意详细看组件的使用方法,有问题可以留言
https://ext.dcloud.net.cn/plugin?id=1078
效果图
下面上代码了,如果是类似需求的话可以直接复制的
<view id="scrollId" :class="{'is-fixed': isFixed}">
<HMfilterDropdown :menuTop="0" :filterData="filterData" :topdata="topdata"
:defaultSelected="defaultSelected" :updateMenuName="true" @confirm="confirm" dataFormat="Object">
</HMfilterDropdown>
</view>
这个是下滑回到顶部的需求
data() {
return {
topdata: '', //自定义传给子组件的值,用来控制点击筛选条件回到顶部
}
},
mounted() { //很多博主这里用的是onload,我这里是做得小程序,onload触发不了,所以我用了mounted
//监听筛选组件距离顶部的距离
const query = wx.createSelectorQuery();
query.select('#scrollId').boundingClientRect();
query.exec((res)=> {
// console.log("1111",res[0].top)
this.nameTop = res[0].top
this.topdata = res[0].top;
})
},
computed: {
//滑动组件置顶
pageFixed() {
if (this.rect > this.nameTop) {
this.isFixed = true;
} else {
this.isFixed = false;
}
}
},
onPageScroll(e) {
this.rect = e.scrollTop;
},
点击筛选条件时回到顶部
下面这个是组件HMfilterDropdown菜单开关,我直接设置了uni.pageScrollTo
props['topdata']
//菜单开关点击事件
togglePage(index) {
if (index == this.showPage) {
this.hidePageLayer(true);
this.hideMask();
} else {
if (this.showPage > -1) {
this.hidePageLayer(false);
}
this.showPageLayer(index);
this.showMask();
}
uni.pageScrollTo({
scrollTop:this.topdata,
duration:0
});
},
.is-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
}