微信小程序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 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
Javascript的闭包详解
Dec 26 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
JS实现动态无缝轮播
Jan 11 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 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
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
PHP里的单例类写法实例
2015/06/25 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
Python  连接字符串(join %)
2008/09/06 Python
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
Python使用gRPC传输协议教程
2018/10/16 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
python对象与json相互转换的方法
2019/05/07 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
泰国第一在线超市:Tops
2021/02/13 全球购物
《蒲公英》教学反思
2014/02/28 职场文书
西式婚礼主持词
2014/03/13 职场文书
公证委托书大全
2014/04/04 职场文书
男女朋友协议书
2014/04/23 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
感恩的演讲稿
2014/05/06 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
伏羲庙导游词
2015/02/09 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL