微信小程序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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
jquery maxlength使用说明
Sep 09 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
详解React中setState回调函数
Jun 14 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
js实现select下拉框选择
Jan 11 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
Vue+Element-U实现分页显示效果
Nov 15 Javascript
JavaScript实现显示和隐藏图片
Apr 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删除文件夹的三种方法
2013/06/09 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
PHP重载基础知识回顾
2020/09/10 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
详解Python中for循环的使用方法
2015/05/14 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
《九寨沟》教学反思
2014/04/08 职场文书
我的长生果教学反思
2014/04/28 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
人与自然的观后感
2015/06/18 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
2016年国培研修日志
2015/11/13 职场文书