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

效果图

实现/原理

• 点击分类，滚动到列表对应位置。

  用上了< scroll-view >这个组件，包括滚动时的事件，点击分类列表跳转到对应的位置，滚动的动画等

• 滑动列表到对应范围，对应分类展示激活状态。

  这个原本以为是比较麻烦的部分，其实很简单。

  用上了wx.createSelectorQuery()这个api，直接获取每个分类列表的高度，顶部位置等。

  我们就可以根据每个分类距离顶部的位置来判断是否是激活的分类。

  注意滚动列表的变量跟激活菜单的变量应该是不公用的

部分代码

html部分

  //左边分类
  <scroll-view scroll-y class="ser-menu">
      <div
        v-for="(item,index) in productlist"
        :key="index"
        :class="{'active':activeClassifyListId==item.classifyId}"
        @click="activeClassify(item.classifyId)"
        class="nemeitem"
        v-if="item.list.length>0"
      >
        <text class="title">{{item.classifyName}}</text>
      </div>
    </scroll-view>
复制代码

  //右边列表
  <scroll-view
    scroll-y
    class="list"
    :scroll-into-view="'item'+activeClassifyId"
    scroll-with-animation
    @scroll="scroll"
  >
      
    <div
      class="listBox"
      :class="'list'+product.classifyId"
      :id="'item'+product.classifyId"
      v-for="(product,productIndex) in productlist"
      :key="productIndex"
      v-if="product.list.length>0"
    >
    //......省略部分代码
    </div>
   </scroll-view>
复制代码

js部分

   // 滚动右边列表
   scroll(){
     this.productlist.map(item=>{
       if(item.list.length>0){
      const query = wx.createSelectorQuery()
       query.select('.list'+item.classifyId)
       .boundingClientRect(reft=>{
         if(0>reft.top&&reft.top>(reft.height*-1)){
           this.activeClassifyIds = item.classifyId
         }
       }).exec()
       }
     })
   },
复制代码

微信小程序封装的组件和api真是越来越顺手的啊！哈哈

转载于:https://juejin.im/post/5d03730d6fb9a07f0b03bf82