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


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 相关文章推荐
使用JavaScript switch case 另类写法
Mar 14 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
javascript实现获取字符串hash值
May 10 Javascript
js实现索引图片切换效果
Nov 21 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
JS实现的自定义map方法示例
May 17 Javascript
JS+DIV实现拖动效果
Feb 11 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
Php header()函数语法及使用代码
2013/11/04 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
2019/10/10 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
JavaScript知识点整理
2015/12/09 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
js实现小星星游戏
2020/03/23 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
重命名批处理python脚本
2013/04/05 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
python 全文检索引擎详解
2017/04/25 Python
python如何实现反向迭代
2018/03/20 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
会计电算化个人自我评价
2013/11/17 职场文书
医药营销个人求职信
2014/04/12 职场文书
计算机专业求职信
2014/06/02 职场文书
计算机毕业生求职信
2014/06/10 职场文书
2014年平安夜寄语
2014/12/08 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL