這里主要用到微信小程序提供的SelectorQuery獲取頁(yè)面節(jié)點(diǎn)信息實(shí)現(xiàn)&＃xff0c;組件用的是微信小程序的scroll-view
邏輯就是獲取右側(cè)盒子的節(jié)點(diǎn)信息&＃xff0c;獲取右側(cè)子分類的節(jié)點(diǎn)信息&＃xff0c;當(dāng)子分類滑動(dòng)到頂部的之后&＃xff0c;則切換左側(cè)分類狀態(tài)&＃xff0c;而且當(dāng)右側(cè)子分類的位置處于觸頂以及包含頂部位置的狀態(tài)下&＃xff0c;同樣激活左側(cè)分類狀態(tài)。愛(ài)掏網(wǎng) - it200.com

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

左側(cè)父級(jí)分類

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>


右側(cè)子分類

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的部分大家自己按照需求寫即可。愛(ài)掏網(wǎng) - it200.com

js部分

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


屬性解釋&＃xff1a;

scroll-with-animation&＃xff1a;在設(shè)置滾動(dòng)條位置時(shí)使用動(dòng)畫過(guò)渡
scroll-into-view&＃xff1a;值應(yīng)為某子元素id&＃xff08;id不能以數(shù)字開(kāi)頭&＃xff09;。愛(ài)掏網(wǎng) - it200.com設(shè)置哪個(gè)方向可滾動(dòng)&＃xff0c;則在哪個(gè)方向滾動(dòng)到該元素
bindscroll&＃xff1a;滾動(dòng)時(shí)觸發(fā)的事件event.detail &＃61; {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
createSelectorQuery&＃xff1a;返回一個(gè) SelectorQuery 對(duì)象實(shí)例。愛(ài)掏網(wǎng) - it200.com獲取頁(yè)面的節(jié)點(diǎn)信息。愛(ài)掏網(wǎng) - it200.com
select&＃xff1a;獲取id的元素
boundingClientRect&＃xff1a;獲取節(jié)點(diǎn)寬高信息和位置信息

說(shuō)明

此處用到的是scroll-into-view根據(jù)子分類的id動(dòng)態(tài)定位到右側(cè)子分類位置&＃xff0c;右側(cè)子分類在滾動(dòng)的時(shí)候&＃xff0c;會(huì)判斷條件&＃xff0c;如果當(dāng)前子分類展示的這一欄觸頂或者處于正在展示的位置&＃xff08;包含頂部&＃xff09;&＃xff0c;更新父級(jí)分類。愛(ài)掏網(wǎng) - it200.com

注意

左側(cè)分類的高亮active不能和滾動(dòng)定位的activeClassifyId共用&＃xff0c;否則右側(cè)滾動(dòng)的時(shí)候會(huì)持續(xù)更新active導(dǎo)致右側(cè)無(wú)法滾動(dòng)&＃xff0c;activeClassifyId只需要在左側(cè)父級(jí)分類點(diǎn)擊的時(shí)候更新即可。愛(ài)掏網(wǎng) - it200.com