本文实例为大家分享了小程序自定义索引菜单的具体代码,供大家参考,具体内容如下
<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)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。