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


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 相关文章推荐
jQuery Ajax 实例全解析
Apr 20 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
vue实现在线翻译功能
Sep 27 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 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可变长参数处理函数详解
2017/02/22 PHP
调试php程序的简单步骤
2019/10/04 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
python爬虫---requests库的用法详解
2020/09/28 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
二手书店创业计划书
2014/01/16 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
公司庆典主持词
2015/07/04 职场文书