小程序自定義索引菜單

更新時間：2022年07月17日 11:47:53 作者：摯友陽光

這篇文章主要為大家詳細介紹了小程序自定義索引菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了小程序自定義索引菜單的具體代碼，供大家參考，具體內容如下

<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;//觸發(fā)的時間
? ? var gapTime = interval || 300 ;//間隔時間，如果interval不傳，則默認300ms
? ? return function() {
? ? ? var context = this;
? ? ? var backTime = new Date();//第一次函數(shù)return即觸發(fā)的時間
? ? ? if (backTime - enterTime > gapTime) {
? ? ? ? fn.call(context,arguments);
? ? ? ? enterTime = backTime;//賦值給第一次觸發(fā)的時間，這樣就保存了第二次觸發(fā)的時間
? ? ? }
? ? };
};
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:[],//索引菜單 全部節(jié)點位置
? ?letterIndex:0,
}


? onReady(){
? ? ?
? ? ? ? let self = this;
? ? ? ? let indexLetterList = self.data.brandIndexList.indexLetterList,
? ? ? ? ? ? letterNodes = self.data.letterNodes,
? ? ? ? ? ? nodes = '.ancehor-',
? ? ? ? ? ? arrs = [];
? ? ? ? ? ? // 獲取所有索引錨點節(jié)點
? ? ? ? ? ? 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();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? },
? ? // 動態(tài)獲取節(jié)點
? ? ?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)

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: