微信小程序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中getUTCMonth()方法的使用
Jun 10 Javascript
js倒计时抢购实例
Dec 20 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
js面向对象的写法
Feb 19 Javascript
Boostrap入门准备之border box
May 09 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
Vuex中实现数据状态查询与更改
Nov 08 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
用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
常用星际术语索引(新手指南)
2020/03/04 星际争霸
php4的session功能评述(二)
2006/10/09 PHP
php 无法载入mysql扩展
2010/03/12 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
PHP 实现缩略图
2021/03/09 PHP
拖动一个HTML元素
2006/12/22 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
python实现员工管理系统
2018/01/11 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
python3让print输出不换行的方法
2020/08/24 Python
Why do we need Unit test
2013/01/03 面试题
货代行业个人求职简历的自我评价
2013/10/22 职场文书
策划总监岗位职责
2014/02/16 职场文书
银行服务感言
2014/03/01 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
大学生见习报告总结
2014/11/04 职场文书
计生个人工作总结
2015/02/28 职场文书
员工手册编写范本
2015/05/14 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL