小程序固定分类导航点击栏目滑动到相应内容

最新推荐文章于 2022-11-28 16:20:22 发布

句点_a

最新推荐文章于 2022-11-28 16:20:22 发布

阅读量6.7k

点赞数 5

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/qq_41851047/article/details/83012792

版权

小程序专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种在小程序中实现页面滑动与导航栏联动的方法，通过监听页面滚动和点击事件，使导航栏随页面滚动而变化，增强用户体验。文章详细展示了使用WXML和JS代码实现这一功能的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：先看一下效果图，点击对应栏目，页面滑动到对应的分类内容。

2：第一步先实现页面内容；

<!-- 分类导航 -->
  <view class='nav_fl'>
    <view wx:for="{{goodlist}}" data-index="{{index}}" data-id="b{{index}}" bindtap='tap'>{{item.name}}
      <text class='{{index==navActive?"navactive":""}}'></text>
    </view>
  </view>

 <view style='clear:both;'></view>

<!-- 滚动部分 -->

 <scroll-view class='scrollView' scroll-y="true" scroll-into-view="{{toView}}" style='height:{{height}}rpx;' bindscroll="scroll" scroll-with-animation='true'>
      <view wx:for="{{goodlist}}" wx:for-index="indexOut" id="b{{indexOut}}">
          <view class='listImg'>
            <image style='width:100%;height:290rpx;' src='{{item.img}}'></image>
            <text>已售：200</text>
          </view>
          <view class='listName'>{{item.title}}</view>
          <view class='listId'>{{item.desc}}</view>
      </view>

</scroll-view>

3:设置滑动部分的高度；

onLoad: function(res) {
    var that = this;
    //设置商品列表高度
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          height: res.windowHeight + 380,
        })
      },
    });
  },

4：点击导航栏目，滑动到对应商品；

  tap: function(e) {
    console.log(e);
    var id = e.currentTarget.dataset.id;
    var index = e.currentTarget.dataset.index;
    this.setData({
      toView: id,
      navActive: index
    });
  },

5：滑动页面，对应导航active；

//首先要获取部分内容距离顶部的高度，滑动的时候监听高度是否到达对应位置；

// 获取商品列表，生成高度集合
        var height = 0;
        var hightArr = []; 
        for (var i = 0; i < that.data.goodlist.length; i++) { //这里的goodlist指对应商品集合
            //获取元素所在位置
          var query = wx.createSelectorQuery();
          var idView="#b"+i;
          query.select(idView).boundingClientRect()
          query.exec(function (res) { 
            var top = res[0].top; 
            hightArr.push(top); 
            that.setData({
              hightArr: hightArr
            });
          });
        } ;


// 页面滑动到相应位置 对应导航提示
   scroll:function(e){
    var scrollTop = e.detail.scrollTop + 400;
    var scrollArr=this.data.hightArr;
       for (var i = 0; i < scrollArr.length; i++) {
        if (scrollTop >= 0 && scrollTop < scrollArr[0]) {
          if (0 != this.data.lastActive) {
            this.setData({
              navActive: 0,
              lastActive: 0
            })
          }
        } else if (scrollTop >= scrollArr[i - 1] && scrollTop <= scrollArr[i]) {
          if (i != this.data.lastActive) {
            this.setData({
              navActive: i,
              lastActive: i
            })
          }
        }
      }
  },