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

<template>
	<view class="contenting">
		
		<view @click="poll()" :catchtouchmove="true"><Delicacy id="boxFixed" :class="{ is_fixed: isfixed }"></Delicacy></view>
		
	</view>
</template>

<script>

import Delicacy from './components/delicacy.vue';
// 引入接口
import { listing } from '../../api/api.js';
import { getpreferurl } from '../../api/request.js';
export default {
	components: {
		
		Delicacy,
	},
	data() {
		return {
			title: 'Hello',
			// 为你优选
			preferdata: [],
			takeshop: [],
			menutop: '',
			rect: '',
			topdata: '',
			isfixed: false
		};
	},
	methods: {
		// 为你优选
		preference() {
			listing(getpreferurl)
				.then(res => {
					console.log(res);
					this.preferdata = res[1].data;
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 回到顶部
		poll() {
			uni.pageScrollTo({
				scrollTop: this.topdata + 2,
				duration: 300
			});
		}
	},
	mounted() {
		this.preference();
	},
	onLoad() {
		// 监听筛选组件距离顶部的距离
		const query = uni.createSelectorQuery();
		query.select('#boxFixed').boundingClientRect();
		query.exec(res => {
			this.menutop = res[0].top;
			this.topdata = res[0].top;
			console.log(this.topdata);
		});
	},
	// 监听页面滚动距离
	onPageScroll(e) {
		// console.log(e.scrollTop)
		this.rect = e.scrollTop;
	},
	computed: {
		// 监听筛选组件置顶和不置顶
		namepage() {
			// 如果页面滚动的高度大于筛选组件距离顶部的高度，那就置顶，反之不置顶
			if (this.rect > this.menutop) {
				this.isfixed = true;
			} else {
				this.isfixed = false;
			}
		}
	}
};
</script>

<style scoped>
.contenting {
	margin: 0 15upx;
}

.is_fixed {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
}
</style>