快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)分類菜單激活狀態(tài)隨列表滾動而自動切換效果詳解

更新時間：2023年01月18日 16:38:57 作者：fanction

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

邏輯就是獲取右側(cè)盒子的節(jié)點信息，獲取右側(cè)子分類的節(jié)點信息，當子分類滑動到頂部的之后，則切換左側(cè)分類狀態(tài)，而且當右側(cè)子分類的位置處于觸頂以及包含頂部位置的狀態(tài)下，同樣激活左側(cè)分類狀態(tài)。

view結(jié)構(gòu)

左側(cè)父級分類

   <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>

右側(cè)子分類

   <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:{
   // ...數(shù)據(jù)...
   active:'', // 左側(cè)分類激活
   activeClassifyId :''  // 滾動定位的id
}
  // 左側(cè)分類點擊
  leftClick(e){
    // 當前分類id
    let { id } = e.currentTarget.dataset
    this.setData({
      active:id,  // 左側(cè)激活的id
      activeClassifyId : id   // 分類定位的id
    })
    // activeClassifyId分類定位的id不應(yīng)該和左側(cè)激活的id是同一個，否則左側(cè)激活會在下面的滾動事件內(nèi)持續(xù)觸發(fā)，導(dǎo)致無法滾動。
  },
  // 右側(cè)滾動觸發(fā)
  scroll(){
    let { rightData } = this.data
    rightData.map(item=>{
      if(item.list.length>0){
    // 返回一個 SelectorQuery 對象實例。獲取頁面的節(jié)點信息。
     const query = wx.createSelectorQuery()
      query.select('#chunk'+item.id)  // 獲取id為chunkID的元素
      .boundingClientRect(ref=>{  // 獲取節(jié)點寬高信息和位置信息
        // 如果當前的子分類滾動到了頂部以及當前子分類正處于頂部的位置
        if(0>ref.top&&ref.top>(ref.height*-1)){
          this.setData({active :item.id})   // 切換左側(cè)父分類的高亮
        }
      }).exec()
      }
    })
  },