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

拼搏现实的明天。 2021-07-25 00:58 2185阅读 0赞

这里先说一下，，筛选的插件我用的是DCloud插件市场的，，，注意详细看组件的使用方法，有问题可以留言

[https://ext.dcloud.net.cn/plugin?id=1078][https_ext.dcloud.net.cn_plugin_id_1078]

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70_pic_center]

下面上代码了，如果是类似需求的话可以直接复制的

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

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;
    	}

[https_ext.dcloud.net.cn_plugin_id_1078]: https://ext.dcloud.net.cn/plugin?id=1078
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/a9ba6fd0b6d643e6b31dca391287529d.png