微信小程序的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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
javascript引用对象的方法代码
Aug 13 Javascript
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
Javascript的this详解
Mar 23 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
vue-model实现简易计算器
Aug 17 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
php入门教程 精简版
2009/12/13 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
Python os模块介绍
2014/11/30 Python
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
django fernet fields字段加密实践详解
2019/08/12 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
六道php面试题附答案
2014/06/05 面试题
Java如何获得ResultSet的总行数
2016/09/03 面试题
医科大学毕业生自荐信
2014/02/03 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
springboot用户数据修改的详细实现
2022/04/06 Java/Android