小程序自定義索引菜單
本文實例為大傢分享瞭小程序自定義索引菜單的具體代碼,供大傢參考,具體內容如下
<view class="indexes_chunk" wx:for="{{brandIndexList.brandGroupList}}" wx:key="item"> <view class="letter ancehor-{{item.indexLetter}}">{{item.indexLetter}}</view> <view class="choice" wx:for="{{item.brandList}}" wx:for-item="items" wx:key="items" wx:for-index="cindex"> <text class="text actives">{{items.enName}}{{items.cnName}}</text> <text class="iconfont icon-gouxuan"></text> </view> </view>
主要代碼:
function throttle(fn, interval) { var enterTime = 0;//觸發的時間 var gapTime = interval || 300 ;//間隔時間,如果interval不傳,則默認300ms return function() { var context = this; var backTime = new Date();//第一次函數return即觸發的時間 if (backTime - enterTime > gapTime) { fn.call(context,arguments); enterTime = backTime;//賦值給第一次觸發的時間,這樣就保存瞭第二次觸發的時間 } }; }; data:{ brandIndexList:{ brandGroupList:[ { brandList:[ {brandId:1, cnName: "愛馬仕A", enName: "Hermes", indexLetter: "A"} ], indexLetter: "A" }, { brandList:[ {brandId:2, cnName: "愛馬仕B", enName: "Hermesss", indexLetter: "B"} ], indexLetter: "B" }, { brandList:[ {brandId:3, cnName: "愛馬仕G", enName: "Hermes", indexLetter: "G"} ], indexLetter: "G" }, { brandList:[ {brandId:4, cnName: "愛馬仕M", enName: "Hermesss", indexLetter: "M"} ], indexLetter: "M" }, { brandList:[ {brandId:5, cnName: "愛馬仕P", enName: "Hermesss", indexLetter: "P"} ], indexLetter: "P" }, { brandList:[ {brandId:6, cnName: "愛馬仕V", enName: "Hermesss", indexLetter: "V"} ], indexLetter: "V" } ], indexLetterList: ["A", "B", "G", "M", "P", "V"] }, letterNodes:[],//索引菜單 全部節點位置 letterIndex:0, } onReady(){ let self = this; let indexLetterList = self.data.brandIndexList.indexLetterList, letterNodes = self.data.letterNodes, nodes = '.ancehor-', arrs = []; // 獲取所有索引錨點節點 indexLetterList.forEach((item)=>{ arrs.push(nodes+item); if(arrs.length == indexLetterList.length){ self.getDoms(arrs.join(','),(res)=>{ letterNodes = res.map((item)=>{return item.top-88}); self.setData({ letterNodes:letterNodes }); }); wx.hideLoading(); } }); }, // 動態獲取節點 getDoms(node,success){ let self = this, query = wx.createSelectorQuery(); setTimeout(()=>{ query.selectAll(node).boundingClientRect((res)=>{ success && success(res); }).exec() },1000); }, // 索引菜單點擊滾動 letterClick(e){ let self = this, index = e.currentTarget.dataset.index, letterNodes = self.data.letterNodes; wx.pageScrollTo({ scrollTop: letterNodes[index] }) }, // 頁面滾動 onPageScroll:throttle(function(e){ let self = this, scrollTop = e[0].scrollTop, stickyTop = self.data.stickyTop, letterNodes = self.data.letterNodes, showSticky = self.data.showSticky, letterIndex = self.data.letterIndex; // 顯示右側索引 if(scrollTop>=stickyTop){ showSticky = true; }else{ showSticky = false; } //滾動定位索引 letterNodes.forEach((item,index)=>{ if(scrollTop>=item){ letterIndex = index; // console.log(index) } }) // console.log(scrollTop) self.setData({ showSticky:showSticky, letterIndex:letterIndex }); },10)
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。