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

效果仿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
                  
              }
              // res[0].top       // #the-id节点的上边界坐标
              // res[1].scrollTop // 显示区域的竖直滚动位置
            })

第二步监听商品列表滚动时，标记高度的逻辑判断

 checkScrool: function(e) {
      if (this.data.scrollCheckStatus===false){
        this.data.scrollCheckStatus=true
      }else{
        let last = this.data.categoryNameHeight[this.data.categoryNameHeight.length - 1].top
        for (let i = this.data.categoryNameHeight.length - 1; i >= 0; i--) {
          if (this.data.categoryNameHeight[i].top <= e.detail.scrollTop && e.detail.scrollTop < last) {
            this.triggerEvent('showSortListScroll', {
              brandActiveCode: this.data.categoryNameHeight[i].goodsCategoryId
            });
            break
          }
          else if (e.detail.scrollTop >= last){
            this.triggerEvent('showSortListScroll', {
              brandActiveCode: this.data.categoryNameHeight[this.data.categoryNameHeight.length - 1].goodsCategoryId
            });
            break
          } 
        }
      }
    },

3、商品分类组件处理在商品接口触发的参数，完成显示

    showSortListScroll: function (e) {
      // console.log(e)
      this.setData({
        brandActiveCode: e.detail.brandActiveCode
      });
    },

<scroll-view scroll-y class="scroll-brand-container"  scroll-into-view="id{{brandActiveCode}}">
<block  wx:for="{{sortListData}}" wx:for-item="item" >
  <view bindtap="clickBrand" data-brand-code="{{item.goodsCategoryId}}" id="id{{item.goodsCategoryId}}"  data-toView-id="{{item.toViewId}}" class="brand-column {{brandActiveCode ==item.goodsCategoryId ?'active':''}}">

      <image src="{{item.categoryUrl}}" class="  {{brandActiveCode ==item.goodsCategoryId ?'':'no-active-img'}}"/>
    <text class="brand-name">{{item.categoryName}}</text>
  </view>
</block>
</scroll-view>

最终效果的gif：文件太大，无法上传，这里贴出链接

https://s23.aconvert.com/convert/p3r68-cdx67/sdpqb-sdfyw.gif

来源：CSDN

作者：脚男footman

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

标签

微信小程序

data

scrolltop