小程序自定义索引菜单

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

<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)

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

查看更多关于小程序自定义索引菜单的详细内容...