微信小程序實現分類菜單激活狀態隨列表滾動而自動切換效果詳解

這篇文章主要介紹了微信小程序分類菜單激活狀態跟隨列表滾動自動切換，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨着小編來一起學習吧

 

 

目錄

• view結構
• js部分
• 屬性解釋
• 說明
• 注意

這裏主要用到微信小程序提供的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只需要在左側父級分類點擊的時候更新即可。