小程序自定义索引菜单
更新时间:2022年7月17日 15:15 点击:394 作者:挚友阳光
本文实例为大家分享了小程序自定义索引菜单的具体代码,供大家参考,具体内容如下
<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)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/qq_41366114/article/details/124364664
上一篇: 微信小程序实现点餐小程序左侧滑动菜单
下一篇: 原生JS实现文件上传
相关文章
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了uniapp微信小程序:key失效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-20
- 本文实例讲述了PHP常用的小程序代码段。分享给大家供大家参考,具体如下:1.计算两个时间的相差几天$startdate=strtotime("2009-12-09");$enddate=strtotime("2009-12-05");上面的php时间日期函数strtotime已经把字符串...2015-11-24
- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
- 这篇文章主要介绍了Python爬取微信小程序通用方法代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-29
- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 本文主要介绍了手把手教你uniapp和小程序分包,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-02
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-19
- 这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- 这篇文章主要介绍了微信小程序自定义底部弹出框动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-16
- 微信小程序目前的火热程度相信不用多言,最近利用空余时间用小程序实现了个动态的登录页效果,所以下面这篇文章主要给大家介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-05-09
- 这篇文章主要介绍了微信小程序 通过控制CSS实现view隐藏与显示的相关资料,需要的朋友可以参考下...2017-05-27
- 这篇文章主要介绍了微信小程序 富文本转文本实例详解的相关资料,需要的朋友可以参考下...2016-10-25