微信小程序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 相关文章推荐
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 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
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
php显示页码分页类的封装
2017/06/08 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
js select常用操作控制代码
2010/03/16 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
jquery实现的table排序功能示例
2017/03/10 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python搜索指定目录的方法
2015/04/29 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
python统计字符的个数代码实例
2020/02/07 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
Python jieba库分词模式实例用法
2021/01/13 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
入党自我鉴定范文
2013/10/04 职场文书
旅游管理毕业生自荐信
2013/11/05 职场文书
接待员岗位责任制
2014/02/10 职场文书
党员承诺书内容
2014/03/26 职场文书
高中社区服务活动报告
2015/02/05 职场文书
Python基础 括号()[]{}的详解
2021/11/07 Python
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js