小程序自定义索引菜单
作者：挚友阳光
这篇文章主要为大家详细介绍了小程序自定义索引菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序自定义索引菜单的具体代码，供大家参考，具体内容如下
<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)以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。