Micro-channel activation status menu applet classification followed scroll through the list to switch mpvue

Renderings

Implementation / Principle

• Select the category, scroll to the position corresponding to the list.

  Were using <scroll-view> this component, including the event when scrolling, click on the category list to jump to the corresponding position, scrolling animation

• Slide list to a corresponding range, corresponding to the active state classification display.

  This thought is more troublesome part is actually very simple.

  Spend wx.createSelectorQuery () this api, direct access height, the top position of each category of the list and so on.

  We can determine the position of the top of each category of classification is active whether the distance.

  Note Scroll through the list of variables with variables activate the menu should not be public

Part of the code

html part

  //左边分类
  <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 part

   // 滚动右边列表
   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()
       }
     })
   },
复制代码

Small micro-channel program package components and api is really more smoothly, ah! Haha

Reproduced in: https: //juejin.im/post/5d03730d6fb9a07f0b03bf82