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


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 相关文章推荐
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 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实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
PHP错误机制知识汇总
2016/03/24 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
java直接调用python脚本的例子
2014/02/16 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
Python numpy 常用函数总结
2017/12/07 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
Python登录注册验证功能实现
2018/06/18 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
由面试题加深对Django的认识理解
2019/07/19 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
结构和类有什么异同
2012/07/16 面试题
电子邮箱格式怎么写
2014/01/12 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
李强为自己工作观后感
2015/06/11 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python