小程序如何自定义索引菜单(小程序,开发技术)

<viewclass="indexes_chunk"wx:for="{{brandIndexList.brandGroupList}}"wx:key="item"><viewclass="letterancehor-{{item.indexLetter}}">{{item.indexLetter}}</view><viewclass="choice"wx:for="{{item.brandList}}"wx:for-item="items"wx:key="items"wx:for-index="cindex"><textclass="textactives">{{items.enName}}{{items.cnName}}</text><textclass="iconfonticon-gouxuan"></text></view></view>

主要代码：

functionthrottle(fn,interval){varenterTime=0;//触发的时间vargapTime=interval||300;//间隔时间，如果interval不传，则默认300msreturnfunction(){varcontext=this;varbackTime=newDate();//第一次函数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(){letself=this;letindexLetterList=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)=>{returnitem.top-88});self.setData({letterNodes:letterNodes});});wx.hideLoading();}});},//动态获取节点getDoms(node,success){letself=this,query=wx.createSelectorQuery();setTimeout(()=>{query.selectAll(node).boundingClientRect((res)=>{success&&success(res);}).exec()},1000);},//索引菜单点击滚动letterClick(e){letself=this,index=e.currentTarget.dataset.index,letterNodes=self.data.letterNodes;wx.pageScrollTo({scrollTop:letterNodes[index]})},//页面滚动onPageScroll:throttle(function(e){letself=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)