微信小程序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 相关文章推荐
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 Javascript
原生js实现弹幕效果
Nov 29 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
php操作JSON格式数据的实现代码
2011/12/24 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
php使用百度天气接口示例
2014/04/22 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
python实现定时发送qq消息
2019/01/18 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
机关财务管理制度
2014/01/17 职场文书
项目建议书范文
2014/05/12 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers