微信小程序分類菜單激活狀態跟隨列表滾動自動切換

這里主要用到微信小程序提供的SelectorQuery獲取頁面節點信息實現&＃xff0c;組件用的是微信小程序的scroll-view
邏輯就是獲取右側盒子的節點信息&＃xff0c;獲取右側子分類的節點信息&＃xff0c;當子分類滑動到頂部的之后&＃xff0c;則切換左側分類狀態&＃xff0c;而且當右側子分類的位置處于觸頂以及包含頂部位置的狀態下&＃xff0c;同樣激活左側分類狀態。愛掏網 - it200.com

view結構

左側父級分類

scroll-view
class&＃61;"left"
scroll-y
>
view
class&＃61;"{{item.id &＃61;&＃61; active ? &＃39;left_current left_box&＃39; : &＃39;left_box&＃39;}}"
wx:for&＃61;"{{leftData}}"
wx:key&＃61;"index"
bindtap&＃61;"leftClick"
data-id&＃61;"{{item.id}}"
>{{item.catName}}view>
scroll-view>


右側子分類

scroll-view
class&＃61;"right"
scroll-y
scroll-into-view&＃61;"{{&＃39;chunk&＃39;&＃43; activeClassifyId}}"
scroll-with-animation
bindscroll&＃61;"scroll"
>
view
class&＃61;"right_box"
wx:for&＃61;"{{rightData}}"
wx:key&＃61;"index"
id&＃61;"{{&＃39;chunk&＃39;&＃43; item.id}}"
>
view class&＃61;"right_title">{{item.name}}view>
view class&＃61;"right_innerBox" wx:for-item&＃61;"item2" wx:for&＃61;"{{item.list}}" wx:key&＃61;"index2" >

view>{{item2.name}}view>
view>
view>
scroll-view>


css的部分大家自己按照需求寫即可。愛掏網 - it200.com

js部分

data:{
// ...數據...
active:&＃39;&＃39;, // 左側分類激活
activeClassifyId :&＃39;&＃39; // 滾動定位的id
}
// 左側分類點擊
leftClick(e){
// 當前分類id
let { id } &＃61; e.currentTarget.dataset
this.setData({
active:id, // 左側激活的id
activeClassifyId : id // 分類定位的id
})
// activeClassifyId分類定位的id不應該和左側激活的id是同一個&＃xff0c;否則左側激活會在下面的滾動事件內持續觸發&＃xff0c;導致無法滾動。愛掏網 - it200.com
},
// 右側滾動觸發
scroll(){
let { rightData } &＃61; this.data
rightData.map(item&＃61;>{
if(item.list.length>0){
// 返回一個 SelectorQuery 對象實例。愛掏網 - it200.com獲取頁面的節點信息。愛掏網 - it200.com
const query &＃61; wx.createSelectorQuery()
query.select(&＃39;#chunk&＃39;&＃43;item.id) // 獲取id為chunkID的元素
.boundingClientRect(ref&＃61;>{ // 獲取節點寬高信息和位置信息
// 如果當前的子分類滾動到了頂部以及當前子分類正處于頂部的位置
if(0>ref.top&&ref.top>(ref.height*-1)){
this.setData({active :item.id}) // 切換左側父分類的高亮
}
}).exec()
}
})
},


屬性解釋&＃xff1a;

scroll-with-animation&＃xff1a;在設置滾動條位置時使用動畫過渡
scroll-into-view&＃xff1a;值應為某子元素id&＃xff08;id不能以數字開頭&＃xff09;。愛掏網 - it200.com設置哪個方向可滾動&＃xff0c;則在哪個方向滾動到該元素
bindscroll&＃xff1a;滾動時觸發的事件event.detail &＃61; {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
createSelectorQuery&＃xff1a;返回一個 SelectorQuery 對象實例。愛掏網 - it200.com獲取頁面的節點信息。愛掏網 - it200.com
select&＃xff1a;獲取id的元素
boundingClientRect&＃xff1a;獲取節點寬高信息和位置信息

說明

此處用到的是scroll-into-view根據子分類的id動態定位到右側子分類位置&＃xff0c;右側子分類在滾動的時候&＃xff0c;會判斷條件&＃xff0c;如果當前子分類展示的這一欄觸頂或者處于正在展示的位置&＃xff08;包含頂部&＃xff09;&＃xff0c;更新父級分類。愛掏網 - it200.com

注意

左側分類的高亮active不能和滾動定位的activeClassifyId共用&＃xff0c;否則右側滾動的時候會持續更新active導致右側無法滾動&＃xff0c;activeClassifyId只需要在左側父級分類點擊的時候更新即可。愛掏網 - it200.com