小程序导航滚动到头部后固定

小程序的导航写法及滑动后固定在头部, 直接看效果图

20180622_120652.gif

如果导航效果满足要求继续查看代码

• 前段代码这里是比较重要的

  
    
      {{navItem.text}}
    
  

• 前段整体布局要使用scroll-view

这里可以监听滑动的距离 然后进行逻辑处理 主要逻辑是判断滑动位置后来处理导航的 class 这个class 就是定位属性

.positionFixed{
  position: fixed;
  left: 0;
  top: 0;
}

• data配置信息看好

 data: {
    adData: ['http://pic.qiantucdn.com/58pic/17/70/72/02U58PICKVg_1024.jpg', 'http://pic2.ooopic.com/12/09/64/46bOOOPICf5_1024.jpg'],
    navData: [
      {
        text: '首页'
      },
      {
        text: '健康'
      },
      {
        text: '情感'
      },
      {
        text: '职场'
      },
      {
        text: '育儿'
      },
      {
        text: '纠纷'
      },
      {
        text: '青葱'
      },
      {
        text: '上课'
      },
      {
        text: '下课'
      }
    ],
    currentNavTab: 0,
    scrollTop: '',    //滑动的距离
    navFixed: false,  //导航是否固定  

• onLoad 方法获取宽高

wx.getSystemInfo({
      success: (res) => {
        this.setData({
          pixelRatio: res.pixelRatio,
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      },
    })

• js主要事件

//导航点击
  switchNav(event) {
    var cur = event.currentTarget.dataset.current;
    //每个tab选项宽度占1/5
    var singleNavWidth = this.data.windowWidth / 5;
    //tab选项居中                            
    this.setData({
      navScrollLeft: (cur - 2) * singleNavWidth
    })
    if (this.data.currentNavTab == cur) {
      return false;
    } else {
      this.setData({
        currentNavTab: cur
      })
    }
  },
  //监听滑动
  layoutScroll: function (e) {
   /** 1. 利用 e.detail.deltaY 已放弃 */
    //this.data.scrollTop = this.data.scrollTop * 1 + e.detail.deltaY * 1;
    
    // const query = wx.createSelectorQuery();
    // query.select('.nav').boundingClientRect();
    // query.selectViewport().scrollOffset();
    // query.exec(function (res) {
     

    // });

    /** 我这里写了固定值 如果使用rpx 可用query可以动态获取其他的高度 然后修改这里值 */
    /** 获取方法参考文档 */

    /** scrollTop 在模拟器上检测不是太灵敏 可在真机上测试 基本上不会出现延迟问题 */
    var navtopHeight = 192;
  
    /** 方法2: detail.scrollTop */
    if (-e.detail.scrollTop <= -navtopHeight) {
      this.setData({
        navFixed: true
      })
    } else {
      this.setData({
        navFixed: false
      })
    }
  }

附上代码 git地址
以上代码自己完善后即刻达到效果图 方法不一欢迎讨论