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