您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“小程序如何自定義索引菜單”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“小程序如何自定義索引菜單”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
<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;//觸發(fā)的時(shí)間 var gapTime = interval || 300 ;//間隔時(shí)間,如果interval不傳,則默認(rèn)300ms return function() { var context = this; var backTime = new Date();//第一次函數(shù)return即觸發(fā)的時(shí)間 if (backTime - enterTime > gapTime) { fn.call(context,arguments); enterTime = backTime;//賦值給第一次觸發(fā)的時(shí)間,這樣就保存了第二次觸發(fā)的時(shí)間 } }; }; data:{ brandIndexList:{ brandGroupList:[ { brandList:[ {brandId:1, cnName: "愛(ài)馬仕A", enName: "Hermes", indexLetter: "A"} ], indexLetter: "A" }, { brandList:[ {brandId:2, cnName: "愛(ài)馬仕B", enName: "Hermesss", indexLetter: "B"} ], indexLetter: "B" }, { brandList:[ {brandId:3, cnName: "愛(ài)馬仕G", enName: "Hermes", indexLetter: "G"} ], indexLetter: "G" }, { brandList:[ {brandId:4, cnName: "愛(ài)馬仕M", enName: "Hermesss", indexLetter: "M"} ], indexLetter: "M" }, { brandList:[ {brandId:5, cnName: "愛(ài)馬仕P", enName: "Hermesss", indexLetter: "P"} ], indexLetter: "P" }, { brandList:[ {brandId:6, cnName: "愛(ài)馬仕V", enName: "Hermesss", indexLetter: "V"} ], indexLetter: "V" } ], indexLetterList: ["A", "B", "G", "M", "P", "V"] }, letterNodes:[],//索引菜單 全部節(jié)點(diǎn)位置 letterIndex:0, } onReady(){ let self = this; let indexLetterList = self.data.brandIndexList.indexLetterList, letterNodes = self.data.letterNodes, nodes = '.ancehor-', arrs = []; // 獲取所有索引錨點(diǎn)節(jié)點(diǎn) 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(); } }); }, // 動(dòng)態(tài)獲取節(jié)點(diǎn) getDoms(node,success){ let self = this, query = wx.createSelectorQuery(); setTimeout(()=>{ query.selectAll(node).boundingClientRect((res)=>{ success && success(res); }).exec() },1000); }, // 索引菜單點(diǎn)擊滾動(dòng) letterClick(e){ let self = this, index = e.currentTarget.dataset.index, letterNodes = self.data.letterNodes; wx.pageScrollTo({ scrollTop: letterNodes[index] }) }, // 頁(yè)面滾動(dòng) 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; // 顯示右側(cè)索引 if(scrollTop>=stickyTop){ showSticky = true; }else{ showSticky = false; } //滾動(dòng)定位索引 letterNodes.forEach((item,index)=>{ if(scrollTop>=item){ letterIndex = index; // console.log(index) } }) // console.log(scrollTop) self.setData({ showSticky:showSticky, letterIndex:letterIndex }); },10)
讀到這里,這篇“小程序如何自定義索引菜單”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。