微信小程序tab切换可滑动切换导航栏跟随滚动实现代码


Posted in Javascript onSeptember 04, 2019

简介

看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能

像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多,我这里只是一个小demo,没有怎么去考虑数据的问题,主要是想着去实现这么个功能,有可能后期引入数据后会出现问题,欢迎提出互相讨论

解决过程

1.在想要实现这个问题的时候找了不少别人的博客看,主体页面布局方面是比较统一的,tab导航栏使用<scroll-view>标签,内容使用<swiper>,其中的使用方法和参数希望自行参考api文档,不过多解释

布局代码如下:

wxml

<view class="container">
 <!-- tab导航栏 -->
 <!-- scroll-left属性可以控制滚动条位置 -->
 <!-- scroll-with-animation滚动添加动画过渡 -->
 <scroll-view scroll-x="true" class="nav" 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 {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">{{navItem.text}}</view>
  </block>  
 </scroll-view>
 <!-- 页面内容 -->
 <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">  
  <swiper-item wx:for="{{[0,1,2,3,4,5,6,7,8]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">
   {{tabItem}}
  </swiper-item>
 </swiper>
</view>

wxss

/**index.wxss**/
page{
 width: 100%;
 height: 100%;
}
.container{
 width: 100%;
 height: 100%;
}
.nav {
 height: 80rpx;
 width: 100%;
 box-sizing: border-box;
 overflow: hidden;
 line-height: 80rpx;
 background: #f7f7f7;
 font-size: 16px;
 white-space: nowrap;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 99;
}
.nav-item {
 width: 20%;
 display: inline-block;
 text-align: center;
}
.nav-item.active{
 color: red;
}
.tab-box{
 background: greenyellow;
 padding-top: 80rpx;
 height: 100%;
 box-sizing: border-box;
}
.tab-content{
 overflow-y: scroll;
}

js

//index.js
//获取应用实例
const app = getApp()

Page({
 data: {
  motto: 'Hello World',
  userInfo: {},
  hasUserInfo: false,
  canIUse: wx.canIUse('button.open-type.getUserInfo'),
  navData:[
   {
    text: '首页'
   },
   {
    text: '健康'
   },
   {
    text: '情感'
   },
   {
    text: '职场'
   },
   {
    text: '育儿'
   },
   {
    text: '纠纷'
   },
   {
    text: '青葱'
   },
   {
    text: '上课'
   },
   {
    text: '下课'
   }
  ],
  currentTab: 0,
  navScrollLeft: 0
 },
 //事件处理函数
 onLoad: function () {
  if (app.globalData.userInfo) {
   this.setData({
    userInfo: app.globalData.userInfo,
    hasUserInfo: true
   })
  } else if (this.data.canIUse) {
   // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
   // 所以此处加入 callback 以防止这种情况
   app.userInfoReadyCallback = res => {
    this.setData({
     userInfo: res.userInfo,
     hasUserInfo: true
    })
   }
  } else {
   // 在没有 open-type=getUserInfo 版本的兼容处理
   wx.getUserInfo({
    success: res => {
     app.globalData.userInfo = res.userInfo
     this.setData({
      userInfo: res.userInfo,
      hasUserInfo: true
     })
    }
   })
  }


  wx.getSystemInfo({
   success: (res) => {
    this.setData({
     pixelRatio: res.pixelRatio,
     windowHeight: res.windowHeight,
     windowWidth: res.windowWidth
    })
   },
  })  
 },
 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.currentTab == cur) {
   return false;
  } else {
   this.setData({
    currentTab: cur
   })
  }
 },
 switchTab(event){
  var cur = event.detail.current;
  var singleNavWidth = this.data.windowWidth / 5;
  this.setData({
   currentTab: cur,
   navScrollLeft: (cur - 2) * singleNavWidth
  });
 }
})

页面代码如上面三部分,可以直接新建一项目进行测试

效果图如下

微信小程序tab切换可滑动切换导航栏跟随滚动实现代码

注意事项

在处理顶部tab导航跟随底部页面滑动的时候遇到一个问题,就是在给<scroll-view>中的scrll-left赋值的时候遇到的问题

逻辑上讲初始时tab导航下标小于2时导航栏不滚动,当大于2时向左滑动,以使被选中的导航栏居中,但是当最左侧的选项因为左滑看不到后,我又点击左侧选项希望导航往右滑动,能够看到左边的导航,按上面的js代码计算scroll-left会产生负值,但是scroll-left即使为负值,但是滚动条不会向左缩进去,所以即使为负值,相当于为0,当时做的时候一直在思考这个怎么用逻辑解决,想着要写各种判断,计算距离,结果到最后一句代码直接赋值就搞定了,也是很无语。

总结

以上所述是小编给大家介绍的微信小程序tab切换可滑动切换导航栏跟随滚动实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
走出JavaScript初学困境—js初学
Dec 29 Javascript
仿jQuery的siblings效果的js代码
Aug 09 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
jquery 手势密码插件
Mar 17 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 #Javascript
深入浅出vue图片路径的实现
Sep 04 #Javascript
webpack 如何解析代码模块路径的实现
Sep 04 #Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 #Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 #Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 #Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 #Javascript
You might like
Syphon 使用方法
2021/03/03 冲泡冲煮
用PHP开发GUI
2006/10/09 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
php利用header函数下载各种文件
2016/08/24 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
基于javascript 闭包基础分享
2013/07/10 Javascript
css配合jquery美化 select
2013/11/29 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
python实现TCP文件传输
2020/03/20 Python
如何写一个自定义标签
2012/12/28 面试题
工程造价专业大专生求职信
2013/10/06 职场文书
物业门卫岗位职责
2013/12/28 职场文书
幼儿园大班新学期寄语
2014/01/18 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
村党支部书记承诺书
2014/05/29 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
海弦WR-800F
2022/04/05 无线电