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


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 相关文章推荐
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
Vue单文件组件开发实现过程详解
Jul 30 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
URL Rewrite的设置方法
2007/01/02 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
python实现整数的二进制循环移位
2019/03/08 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
公司离职证明范本
2014/01/13 职场文书
抄作业检讨书
2014/02/17 职场文书
我为自己代言广告词
2014/03/18 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
档案接收函格式
2015/01/30 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
创业计划书之干洗店
2019/09/10 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android