应用场景:
很多场景我们都需要用到分类筛选,因此有时候要实现点击分类筛选的时候,分类吸顶,当上滑的时候又回到之前那个位置。
这个功能,我们要清楚几点:
1,点击分类条时候,吸顶
2,分类条滑动到顶部的时候,吸顶
3,当上滑到分类条上面的时候,去掉吸顶
根据上面几点,一步一步的实现:
<view class="menu" :style="{position:scrollTop<topHight?'':'sticky',top:0+'rpx',zIndex:5}">
<view v-for="(item,b) in classList" :key="b" @click="togglePopup(b)">
{
{item.class}}
<view class="iconfont iconarrow-sortdown-small"></view>
</view>
</view>
1.给点击的分类增加一个点击事件togglePopup,点击时候获取向上卷曲的高度,这里用的是uni官方自带的方法,支持小程序
//弹出框
togglePopup(b) {
//得到向上卷起的高度
const query = uni.createSelectorQuery().in(this);