微信小程序的tab选项卡的实现效果


Posted in Javascript onMay 15, 2019

效果图,既可以点击切换,又可以滑动切换

微信小程序的tab选项卡的实现效果

.wxml

<!--pages/detail/detail.wxml-->
<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>

.wxss

/* pages/detail/detail.wxss */
.swiper-tab{
  width: 100%;
  border-bottom: 2rpx solid #ccc;
  text-align: center;
  height: 88rpx;
  line-height: 88rpx;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}
.swiper-tab-item{
  width: 30%; 
  color:#434343;
}
.active{
  color:#F65959;
  border-bottom: 4rpx solid #F65959;
}
swiper{
 text-align: center;
}

.js

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

 },
 //滑动切换
 swiperTab: function (e) {
  var that = this;
  that.setData({
   currentTab: 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
   })
  }
 }
})

以上所述是小编给大家介绍的微信小程序的tab选项卡的实现效果详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
少女风vue组件库的制作全过程
May 15 #Javascript
vue两组件间值传递 $router.push实现方法
May 15 #Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 #Javascript
详解微信UnionID作用
May 15 #Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 #Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 #Javascript
详解小程序用户登录状态检查与更新实例
May 15 #Javascript
You might like
人大复印资料处理程序_补充篇
2006/10/09 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
windows下安装python paramiko模块的代码
2013/02/10 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
python eventlet绿化和patch原理
2020/11/21 Python
python 实现超级玛丽游戏
2020/11/25 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
Java程序员面试题
2013/07/15 面试题
商场消防管理制度
2014/01/12 职场文书
学习经验演讲稿
2014/05/10 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
主题党日活动总结
2014/07/08 职场文书
平面设计师岗位职责
2014/09/18 职场文书
个人合伙协议书范本
2014/10/14 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
初中团委工作总结
2015/08/13 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL