微信小程序商品列表滑动联动商品分类

最新推荐文章于 2024-08-26 17:31:40 发布

脚男footman

最新推荐文章于 2024-08-26 17:31:40 发布

阅读量6k

点赞数

分类专栏： js 小程序

本文链接：https://blog.csdn.net/sinat_23900111/article/details/103646538

版权

本文介绍了如何在微信小程序中实现商品列表滚动时联动商品分类的效果，包括设置分类标记位置、监听滚动事件以及处理分类显示。通过监听商品列表滚动，当达到分类标记位置时触发分类选中事件，实现组件间的交互。

摘要由CSDN通过智能技术生成

效果仿x团小程序的商品列表滚动时，联动商品分类的效果。

简单描述思路：

1、商品列表做出不同分类的标记位置

2、监听商品列表滚动时，是否到达分类标记位置的高度

3、符合达到标记位置的高度后，触发商品分类栏目选中事件

注意：我的商品分类栏目和商品列表同属一个页面，但分别是两个不同的components，所以触发事件需要传参

正文部分：

先观察下图：留意红色标注部分，这个高度在获取商品列表数据后，通过下面代码获取

           // 获取商品数组的位置信息
            const query = this.createSelectorQuery()
            query.selectAll('.category-name').boundingClientRect()
            query.exec((res)=> {
              for(let i=0;i<res[0].length;i++){
                // console.log(res[0][i].top)
                this.data.categoryNameHeight[i].top=res[0][i].top - res[0][0].top