欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2023年01月18日 16:38:57   作者:fanction  
這篇文章主要介紹了微信小程序分類菜單激活狀態(tài)跟隨列表滾動(dòng)自動(dòng)切換,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

這里主要用到微信小程序提供的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)文章

  • 為什么TypeScript的Enum會出現(xiàn)問題

    為什么TypeScript的Enum會出現(xiàn)問題

    TypeScript引入了很多靜態(tài)編譯語言的特性,今天有一個(gè)類型需要著重討論下,這就是enum,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-06-06
  • JS中數(shù)據(jù)類型的正確判斷方法實(shí)例

    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來徹底卸載頑固程序

    運(yùn)用Windows XP附帶的Msicuu.exe、Msizap.exe來徹底卸載頑固程序...
    2007-04-04
  • Javascript封裝id、class與元素選擇器方法示例

    Javascript封裝id、class與元素選擇器方法示例

    這篇文章主要給大家介紹了Javascript封裝id、class與元素選擇器的方法,文中給出了詳細(xì)的示例代碼,對大家的理解和學(xué)習(xí)具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。
    2017-03-03
  • JavaScript避免嵌套代碼淺析

    JavaScript避免嵌套代碼淺析

    這篇文章主要介紹了JavaScript避免嵌套代碼,很多時(shí)候需要編寫的邏輯本身就很惡心, 乍看之下, 堆頁巖般的判定嵌套里似乎每一層都是必要的, 也只能說盡量讓它看起來不那么惡心
    2023-02-02
  • js實(shí)現(xiàn)列表向上無限滾動(dòng)

    js實(shí)現(xiàn)列表向上無限滾動(dòng)

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)列表向上無限滾動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-01-01
  • js為空或不是對象問題的快速解決方法

    js為空或不是對象問題的快速解決方法

    這篇文章主要介紹了js為空或不是對象問題的快速解決方法。需要的朋友可以過來參考下,希望對大家有所幫助
    2013-12-12
  • 實(shí)現(xiàn)51Map地圖接口(示例代碼)

    實(shí)現(xiàn)51Map地圖接口(示例代碼)

    這篇文章主要介紹了實(shí)現(xiàn)51Map地圖接口的示例代碼。需要的朋友可以過來參考下,希望對大家有所幫助
    2013-11-11
  • JavaScript編寫一個(gè)簡易購物車功能

    JavaScript編寫一個(gè)簡易購物車功能

    這篇文章主要為大家詳細(xì)介紹了JavaScript簡易購物車功能的編寫代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • JavaScript中的淺拷貝和深拷貝原理與實(shí)現(xiàn)淺析

    JavaScript中的淺拷貝和深拷貝原理與實(shí)現(xiàn)淺析

    這篇文章主要介紹了JavaScript中的淺拷貝和深拷貝原理與實(shí)現(xiàn),JavaScript 中的淺拷貝和深拷貝指的是在復(fù)制對象(包括對象、數(shù)組等)時(shí),是否只復(fù)制對象的引用地址或者在復(fù)制時(shí)創(chuàng)建一個(gè)新的對象
    2023-04-04

最新評論