uniapp实现筛选栏吸顶和点击筛选条件回到顶部的需求_hm-filterdropdown

这里先说一下，，筛选的插件我用的是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>
1
2
3
4
5

这个是下滑回到顶部的需求

	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;
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

点击筛选条件时回到顶部

下面这个是组件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
	});
				
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.is-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
1
2
3
4
5
6