当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 小程序导航滚动到头部后固定

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

2018-08-27 11:14 来源: 霸界科技

摘要:小程序导航滚动到头部后固定 这也是小程序主界面经常会使用的一种效果,那么如何开发实现,下面为大家解答。...

期权保本理财
  小程序导航滚动到头部后固定 这也是小程序主界面经常会使用的一种效果,那么如何开发实现,下面为大家解答。
 
小程序导航滚动到头部后固定
 
  前段代码这里是比较重要的
 
  <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;">
 
  这里可以监听滑动的距离 然后进行逻辑处理 主要逻辑是判断滑动位置后来处理导航的 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) {
 
  this.data.scrollTop = this.data.scrollTop * 1 + e.detail.deltaY * 1;
 
  console.log(this.data.scrollTop)
 
  console.log(this.data.navFixed)
 
  if (this.data.scrollTop <= -342) {
 
  this.setData({
 
  navFixed: true
 
  })
 
  } else {
 
  this.setData({
 
  navFixed: false
 
  })
 
  }
 
  }
 
  以上代码自己完善后即刻达到效果
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088