微信小程序之选项卡的实现方法


Posted in Javascript onSeptember 29, 2017

 微信小程序之选项卡的实现方法

前言:

从事前端的同学们一定不会对选项卡陌生,不管是自己原生写的,还是各个UI框架里带的,我想大家都使用过很多选项卡,对选项卡的原理也足够清楚了,下面我们来在微信小程序里实现选项卡的功能。

微信小程序里没有自带选项卡组件,但是却带有swiper组件,所以,我们便利用swiper来实现选项卡的功能。

先看效果图:

微信小程序之选项卡的实现方法

微信小程序之选项卡的实现方法

实现代码:

页面代码:

<view class="swiper-tab">
  <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">一</view>
  <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">二</view>
  <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">三</view>
</view>

<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
  <swiper-item><view>第一屏</view></swiper-item>
  <swiper-item><view>第二屏</view></swiper-item>
  <swiper-item><view>第三屏</view></swiper-item>
</swiper>

js代码:

var app=getApp()
Page({
 data:{
  currentTab:0
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数

 },
 //滑动切换
 swiperTab:function( e ){
  var that=this;
  that.setData({
   currentTba:e.detail.current
  });
 },
 //点击切换
 clickTab: function( e ) { 

  var that = this; 

  if( this.data.currentTab === e.target.dataset.current ) { 
   return false; 
  } else { 
   that.setData( { 
    currentTab: e.target.dataset.current 
   }) 
  } 
 } 

})

css代码:

.swiper-tab{
  width: 100%;
  border-bottom: 2rpx solid #ccc;
  text-align: center;
  height: 88rpx;
  line-height: 88rpx;
  font-weight: bold;
}
.swiper-tab-item{
  display: inline-block;
  width: 33.33%;
  color:red;
}
.active{
  color:aqua;
  border-bottom: 4rpx solid red;
}

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
List Installed Software Features
Jun 11 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 Javascript
vue-cli的eslint相关用法
Sep 29 #Javascript
JavaScript数组的5种迭代方法
Sep 29 #Javascript
微信小程序之GET请求的实例详解
Sep 29 #Javascript
js仿微信抢红包功能
Sep 25 #Javascript
给vue项目添加ESLint的详细步骤
Sep 29 #Javascript
微信小程序 POST请求的实例详解
Sep 29 #Javascript
微信小程序之数据缓存的实例详解
Sep 29 #Javascript
You might like
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
Python subprocess库的使用详解
2018/10/26 Python
python 中如何获取列表的索引
2019/07/02 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
python模拟实现斗地主发牌
2020/01/07 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
上课迟到检讨书100字
2014/01/11 职场文书
大一学生的职业生涯规划书范文
2014/01/19 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python
Python绘制散乱的点构成的图的方法
2022/04/21 Python