文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

小程序自定义索引菜单

2024-04-02 19:55

关注

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

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

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯