应用场景:
很多场景我们都需要用到分类筛选,因此有时候要实现点击分类筛选的时候,分类吸顶,当上滑的时候又回到之前那个位置。
这个功能,我们要清楚几点:
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);
本文介绍了在uniapp中实现点击分类筛选时的吸顶效果,详细讲解了实现过程中需要注意的三个关键点:点击分类吸顶、分类条滑动到顶部吸顶以及上滑到分类条上方时取消吸顶。通过结合uniapp的内置方法,可以支持小程序的类似美团外卖的吸顶效果。
最低0.47元/天 解锁文章
4932

被折叠的 条评论
为什么被折叠?



