小程序的導航寫法及滑動后固定在頭部, 直接看效果圖

20180622_120652.gif

如果導航效果滿足要求繼續(xù)查看代碼

• 前段代碼這里是比較重要的

  <scroll-view scroll-x="true" class="nav {{navFixed? 'positionFixed':''}}" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
    <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
      <view class="nav-item {{currentNavTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">{{navItem.text}}</view>
    </block>
  </scroll-view>

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

<scroll-view class="layout" bindscroll='layoutScroll' scroll-y="true" style="height: {{windowHeight}}px;">

這里可以監(jiān)聽滑動的距離 然后進行邏輯處理 主要邏輯是判斷滑動位置后來處理導航的 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
      })
    }
  },
  //監(jiān)聽滑動
  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可以動態(tài)獲取其他的高度 然后修改這里值 */
    /** 獲取方法參考文檔 */

    /** scrollTop 在模擬器上檢測不是太靈敏 可在真機上測試 基本上不會出現(xiàn)延遲問題 */
    var navtopHeight = 192;
  
    /** 方法2: detail.scrollTop */
    if (-e.detail.scrollTop <= -navtopHeight) {
      this.setData({
        navFixed: true
      })
    } else {
      this.setData({
        navFixed: false
      })
    }
  }

附上代碼 git地址
以上代碼自己完善后即刻達到效果圖 方法不一歡迎討論