微信小程序实现选项卡滑动切换


Posted in Javascript onOctober 22, 2020

本文实例为大家分享了微信小程序实现选项卡滑动切换的具体代码,供大家参考,具体内容如下

先看效果:

微信小程序实现选项卡滑动切换

再上代码:

1.index.wxml

<!--index.wxml--> 
<view class="swiper-tab"> 
 <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈</view> 
 <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵</view> 
 <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">嘿嘿</view> 
</view> 
 
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> 
 <!-- 我是哈哈 --> 
 <swiper-item> 
 <view>我是哈哈</view> 
 </swiper-item> 
 <!-- 我是呵呵 --> 
 <swiper-item> 
 <view>我是呵呵</view> 
 </swiper-item> 
 <!-- 我是嘿嘿 --> 
 <swiper-item> 
 <view>我是嘿嘿</view> 
 </swiper-item> 
</swiper>

2.index.wxss

/**index.wxss**/ 
.swiper-tab{ 
 width: 100%; 
 border-bottom: 2rpx solid #777777; 
 text-align: center; 
 line-height: 80rpx;} 
.swiper-tab-list{ font-size: 30rpx; 
 display: inline-block; 
 width: 33.33%; 
 color: #777777; 
} 
.on{ color: #da7c0c; 
 border-bottom: 5rpx solid #da7c0c;} 
 
.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; } 
.swiper-box view{ 
 text-align: center; 
}

3.index.js

//index.js 
//获取应用实例 
var app = getApp() 
Page( { 
 data: { 
 /** 
 * 页面配置 
 */ 
 winWidth: 0, 
 winHeight: 0, 
 // tab切换 
 currentTab: 0, 
 }, 
 onLoad: function() { 
 var that = this; 
 
 /** 
 * 获取系统信息 
 */ 
 wx.getSystemInfo( { 
 
 success: function( res ) { 
 that.setData( { 
  winWidth: res.windowWidth, 
  winHeight: res.windowHeight 
 }); 
 } 
 
 }); 
 }, 
 /** 
 * 滑动切换tab 
 */ 
 bindChange: function( e ) { 
 
 var that = this; 
 that.setData( { currentTab: e.detail.current }); 
 
 }, 
 /** 
 * 点击tab切换 
 */ 
 swichNav: function( e ) { 
 
 var that = this; 
 
 if( this.data.currentTab === e.target.dataset.current ) { 
 return false; 
 } else { 
 that.setData( { 
 currentTab: e.target.dataset.current 
 }) 
 } 
 } 
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript日历实现代码
Sep 12 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
Javascript中的解构赋值语法详解
Apr 02 Javascript
微信小程序实现文件预览
Oct 22 #Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 #Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 #Javascript
vue实现下拉菜单树
Oct 22 #Javascript
Javascript柯里化实现原理及作用解析
Oct 22 #Javascript
Node.js fs模块原理及常见用途
Oct 22 #Javascript
使用vue构建多页面应用的示例
Oct 22 #Javascript
You might like
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
php+mysql数据库查询实例
2015/01/21 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
Django的session中对于用户验证的支持
2015/07/23 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
自动化职业生涯规划书范文
2014/01/03 职场文书
《乌塔》教学反思
2014/02/17 职场文书
美术毕业生求职信
2014/02/25 职场文书
简单的项目建议书模板
2014/03/12 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
个人授权委托书模板
2014/09/14 职场文书
2014年店长工作总结
2014/11/17 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书