微信小程序?qū)崿F(xiàn)分類菜單激活狀態(tài)隨列表滾動(dòng)而自動(dòng)切換效果詳解
這里主要用到微信小程序提供的SelectorQuery
獲取頁面節(jié)點(diǎn)信息實(shí)現(xiàn),組件用的是微信小程序的scroll-view
邏輯就是獲取右側(cè)盒子的節(jié)點(diǎn)信息,獲取右側(cè)子分類的節(jié)點(diǎn)信息,當(dāng)子分類滑動(dòng)到頂部的之后,則切換左側(cè)分類狀態(tài),而且當(dāng)右側(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 :'' // 滾動(dòng)定位的id } // 左側(cè)分類點(diǎn)擊 leftClick(e){ // 當(dāng)前分類id let { id } = e.currentTarget.dataset this.setData({ active:id, // 左側(cè)激活的id activeClassifyId : id // 分類定位的id }) // activeClassifyId分類定位的id不應(yīng)該和左側(cè)激活的id是同一個(gè),否則左側(cè)激活會在下面的滾動(dòng)事件內(nèi)持續(xù)觸發(fā),導(dǎo)致無法滾動(dòng)。 }, // 右側(cè)滾動(dòng)觸發(fā) scroll(){ let { rightData } = this.data rightData.map(item=>{ if(item.list.length>0){ // 返回一個(gè) SelectorQuery 對象實(shí)例。獲取頁面的節(jié)點(diǎn)信息。 const query = wx.createSelectorQuery() query.select('#chunk'+item.id) // 獲取id為chunkID的元素 .boundingClientRect(ref=>{ // 獲取節(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() } }) },
屬性解釋
scroll-with-animation
:在設(shè)置滾動(dòng)條位置時(shí)使用動(dòng)畫過渡
scroll-into-view
:值應(yīng)為某子元素id(id不能以數(shù)字開頭)。設(shè)置哪個(gè)方向可滾動(dòng),則在哪個(gè)方向滾動(dòng)到該元素
bindscroll
:滾動(dòng)時(shí)觸發(fā)的事件event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
createSelectorQuery
:返回一個(gè) SelectorQuery 對象實(shí)例。獲取頁面的節(jié)點(diǎn)信息。
select
:獲取id的元素
boundingClientRect
:獲取節(jié)點(diǎn)寬高信息和位置信息
說明
此處用到的是scroll-into-view
根據(jù)子分類的id動(dòng)態(tài)定位到右側(cè)子分類位置,右側(cè)子分類在滾動(dòng)的時(shí)候,會判斷條件,如果當(dāng)前子分類展示的這一欄觸頂或者處于正在展示的位置(包含頂部),更新父級分類。
注意
左側(cè)分類的高亮active不能和滾動(dòng)定位的activeClassifyId共用,否則右側(cè)滾動(dòng)的時(shí)候會持續(xù)更新active
導(dǎo)致右側(cè)無法滾動(dòng),activeClassifyId
只需要在左側(cè)父級分類點(diǎn)擊的時(shí)候更新即可。
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)分類菜單激活狀態(tài)隨列表滾動(dòng)而自動(dòng)切換效果詳解的文章就介紹到這了,更多相關(guān)小程序菜單激活狀態(tài)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS中數(shù)據(jù)類型的正確判斷方法實(shí)例
怎么去判斷一個(gè)數(shù)據(jù)屬于哪個(gè)數(shù)據(jù)類型,這個(gè)是很常見的操作,我們一般都會想到typeof和instanceof這兩個(gè)常見的方法,但有時(shí)候這兩種方法并不能滿足我們的需求,下面這篇文章主要給大家介紹了關(guān)于JS中數(shù)據(jù)類型的正確判斷方法,需要的朋友可以參考下2021-08-08運(yùn)用Windows XP附帶的Msicuu.exe、Msizap.exe來徹底卸載頑固程序
運(yùn)用Windows XP附帶的Msicuu.exe、Msizap.exe來徹底卸載頑固程序...2007-04-04Javascript封裝id、class與元素選擇器方法示例
這篇文章主要給大家介紹了Javascript封裝id、class與元素選擇器的方法,文中給出了詳細(xì)的示例代碼,對大家的理解和學(xué)習(xí)具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-03-03JavaScript中的淺拷貝和深拷貝原理與實(shí)現(xiàn)淺析
這篇文章主要介紹了JavaScript中的淺拷貝和深拷貝原理與實(shí)現(xiàn),JavaScript 中的淺拷貝和深拷貝指的是在復(fù)制對象(包括對象、數(shù)組等)時(shí),是否只復(fù)制對象的引用地址或者在復(fù)制時(shí)創(chuàng)建一個(gè)新的對象2023-04-04