微信小程序tab左右滑动切换功能的实现代码


Posted in Javascript onFebruary 08, 2021

效果图:

微信小程序tab左右滑动切换功能的实现代码

一、简介

自己的小程序需要实现这样的功能

1.核心思想

swiper 和scroll-view共用两个变量currentTab  navScrollLeft,当点击nav或者滑动swiper时设置两个变量的值为当前的index

二、实现

tab导航栏使用<scroll-view>标签,内容使用<swiper>

1.wxml实现

<view class="container">
 <!-- tab导航栏 -->
 <!-- scroll-left属性可以控制滚动条位置 -->
 <!-- scroll-with-animation滚动添加动画过渡 -->
 <!-- 
  scroll-x="true"
  navScrollLeft: 0初值
  navData:tab text
  使用 wx:for-item 可以指定数组当前元素的变量名,
  使用 wx:for-index 可以指定数组当前下标的变量名:
  -->

  <!--tabs -->
 <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">
   <!-- 判断是否选中,选中设置样式 -->
   <!-- switchNav -->
   <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">
    {{navItem.text}}</view>
  </block>
 </scroll-view>


 <!-- 页面内容 -->
 <!-- duration="300":滑动动画时长 -->
 <!-- switchTab -->
 <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
  <swiper-item wx:for="{{[0,1,2,3,4,5,6]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx"
   class="tab-content">
   {{tabItem}}
  </swiper-item>
 </swiper>
</view>

2.js实现

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

Page({
 data: {
  navData:[
   {
    text: '新闻'
   },
   {
    text: '表白'
   },
   {
    text: '外卖'
   },
   {
    text: '当家教'
   },
   {
    text: '找家教'
   },
   {
    text: '租房子'
   },
   {
    text: '驾校'
   }
  ],
  currentTab: 0,
  navScrollLeft: 0
 },
 //事件处理函数
 onLoad: function () {
  
 },
 switchNav(event){
  // 获取当前tab 的id
  var cur = event.currentTarget.dataset.current; 
  //每个tab选项宽度占1/5
  var singleNavWidth = this.data.windowWidth / 5;

  //tab选项居中       
  this.setData({
   navScrollLeft: (cur - 2) * singleNavWidth
  }) 
  // 判断id是否和点击的tab id 一致 
  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
  });
 }
})

3.wxss实现

/**index.wxss**/
page {
 width: 100%;
 height: 100%;
}

.container {
 width: 100%;
 height: 100%;
}

.nav {
 /* 设置tab-nav宽高度 */
 height: 80rpx;
 width: 100%;

 /* 假如您需要并排放置两个带边框的框,
 可通过将 box-sizing 设置为 "border-box"。 */
 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:
 green;
}

.tab-box {
 background:
 rgb(31, 201, 96);
 /* 这里设置成nav的高度 */
 padding-top: 80rpx;
 height: 100%;
 box-sizing: border-box;
}

.tab-content {
 /* 裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话: */
 overflow-y: scroll;
}

三、参考和总结

此文章参考 https://3water.com/article/169290.htm

解决过程
1.tab的宽度固定为1/5,可以改进成根据tab的内容变化

四、优化

0.效果图

微信小程序tab左右滑动切换功能的实现代码

1.每个tab长度自适应 2.先前隔tab点击时

如果当前处于1,点击3时,路径时1-2-3,真机测试后,会直接跳转3,不会影响体验

// *******************************导航栏选择获取id和导航栏的位置**************************************
 tabSelect(e) {
 console.log("结果:", e);
 // 操作新闻数据库
 var cur = e.currentTarget.dataset.id;
 //tab选项居中 
 this.setData({
  // 每一个tab的id
  TabCur: e.currentTarget.dataset.id,
  
  //自适应
  scrollLeft: (e.currentTarget.dataset.id) * 60,
 })

 // 判断id是否和点击的tab id 一致 
 if (this.data.currentTab == cur) {
  return false;
 } else {
  this.setData({
  currentTab: cur
  })
 }
 console.log(e.currentTarget.dataset.id);
 console.log(this.data.TabCur);
 console.log("横向滚动条位置", this.data.scrollLeft);
 },
 switchTab(e) {
 console.log(e);
 var cur = e.detail.current;
 this.setData({
  TabCur: cur,
  scrollLeft: cur * 60,
 });
 }

到此这篇关于微信小程序tab左右滑动切换功能的实现代码的文章就介绍到这了,更多相关小程序tab滑动切换内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript面象对象设计
Apr 28 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
用Javascript实现发送短信验证码间隔功能
Feb 08 #Javascript
原生js 实现表单验证功能
Feb 08 #Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 #Javascript
JavaScript实现点击出现子菜单效果
Feb 08 #Javascript
深入理解javascript中的this
Feb 08 #Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 #Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 #Vue.js
You might like
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
JS 自定义带默认值的函数
2011/07/21 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
各个系统下的Python解释器相关安装方法
2015/10/12 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python定时任务sched模块用法示例
2018/07/16 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
《在家里》教后反思
2014/03/01 职场文书
五一手机促销方案
2014/03/08 职场文书
成立公司计划书
2014/05/07 职场文书
小学运动会班级口号
2014/06/09 职场文书
公司租房协议书范本
2014/10/08 职场文书
试用期辞职信范文
2015/03/02 职场文书
甲午风云观后感
2015/06/02 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
什么是Python装饰器?如何定义和使用?
2022/04/11 Python