微信小程序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下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
模仿jQuery each函数的链式调用
Jul 22 Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
Vue响应式原理详解
Apr 18 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
react ant Design手动设置表单的值操作
Oct 31 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执行速度全攻略(下)
2006/10/09 PHP
劣质的PHP代码简化
2010/02/08 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
实例解析php的数据类型
2018/10/24 PHP
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
深入了解js原型模式
2019/05/30 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
Python中使用中文的方法
2011/02/19 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
python学生信息管理系统(初级版)
2018/10/17 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
mysql有关权限的表都有哪几个
2015/04/22 面试题
2014年社区庆元旦活动方案
2014/03/08 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
高中生评语大全
2014/04/25 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
2015年班组工作总结
2015/04/20 职场文书
用人单位聘用意向书
2015/05/11 职场文书
2015中学政教处工作总结
2015/07/22 职场文书