小程序自定义索引菜单小程序自定义索引菜单

【小程序自定义索引菜单】本文实例为大家分享了小程序自定义索引菜单的具体代码，供大家参考，具体内容如下

文章图片

{{item.indexLetter}}{{items.enName}}{{items.cnName}}

主要代码：

function throttle(fn, interval) {var enterTime = 0; //触发的时间var gapTime = interval || 300 ; //间隔时间，如果interval不传，则默认300msreturn 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)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。