关于微信小程序:微信小程序分类菜单激活状态跟随列表滚动自动切换

这里次要用到微信小程序提供的 SelectorQuery 获取页面节点信息实现，组件用的是微信小程序的 scroll-view
逻辑就是获取右侧盒子的节点信息，获取右侧子分类的节点信息，当子分类滑动到顶部的之后，则切换左侧分类状态，而且当右侧子分类的地位处于触顶以及蕴含顶部地位的状态下，同样激活左侧分类状态。

view 构造

左侧父级分类

   <scroll-view 
   class="left"
   scroll-y
   >
     <view 
     class="{{item.id == active ?'left_current left_box':'left_box'}}" 
     wx:for="{{leftData}}" 
     wx:key="index"
     bindtap="leftClick"
     data-id="{{item.id}}"
     >{{item.catName}}</view>
   </scroll-view>

右侧子分类

   <scroll-view 
   class="right"
   scroll-y
   scroll-into-view="{{'chunk'+ activeClassifyId}}"
   scroll-with-animation
   bindscroll="scroll"
   >
     <view 
     class="right_box" 
     wx:for="{{rightData}}" 
     wx:key="index"
     id="{{'chunk'+ item.id}}"
     >
        <view class="right_title">{{item.name}}</view>
        <view class="right_innerBox" wx:for-item="item2" wx:for="{{item.list}}" wx:key="index2" >
 
        <view>{{item2.name}}</view>
        </view>
     </view>
   </scroll-view>

css 的局部大家本人依照需要写即可。

js 局部

data:{
   // ... 数据...

   active:'', // 左侧分类激活
   activeClassifyId :''  // 滚动定位的 id
}


  // 左侧分类点击
  leftClick(e){
    // 以后分类 id
    let {id} = e.currentTarget.dataset
    this.setData({
      active:id,  // 左侧激活的 id
      activeClassifyId : id   // 分类定位的 id
    })
    // activeClassifyId 分类定位的 id 不应该和左侧激活的 id 是同一个，否则左侧激活会在上面的滚动事件内继续触发，导致无奈滚动。},



  // 右侧滚动触发
  scroll(){let { rightData} = this.data
    rightData.map(item=>{if(item.list.length>0){
    // 返回一个 SelectorQuery 对象实例。获取页面的节点信息。const query = wx.createSelectorQuery()
      query.select('#chunk'+item.id)  // 获取 id 为 chunkID 的元素
      .boundingClientRect(ref=>{  // 获取节点宽高信息和地位信息
        // 如果以后的子分类滚动到了顶部以及以后子分类正处于顶部的地位
        if(0>ref.top&&ref.top>(ref.height*-1)){this.setData({active :item.id})   // 切换左侧父分类的高亮
        }
      }).exec()}
    })
  },

属性解释：

scroll-with-animation：在设置滚动条地位时应用动画过渡
scroll-into-view：值应为某子元素 id（id 不能以数字结尾）。设置哪个方向可滚动，则在哪个方向滚动到该元素
bindscroll：滚动时触发的事件 event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
createSelectorQuery：返回一个 SelectorQuery 对象实例。获取页面的节点信息。
select：获取 id 的元素
boundingClientRect：获取节点宽高信息和地位信息

阐明

此处用到的是 scroll-into-view 依据子分类的 id 动静定位到右侧子分类地位，右侧子分类在滚动的时候，会判断条件，如果以后子分类展现的这一栏触顶或者处于正在展现的地位（蕴含顶部），更新父级分类。

留神

== 左侧分类的高亮 active 不能和滚动定位的 activeClassifyId 共用 ==，否则右侧滚动的时候会继续更新 active 导致右侧无奈滚动，activeClassifyId只须要在左侧父级分类点击的时候更新即可。