微信小程序的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 相关文章推荐
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
js生成word中图片处理方法
Jan 06 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
少女风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如何通过AJAX方式实现登录功能
2015/11/23 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
vue之延时刷新实例
2019/11/14 Javascript
python 自动提交和抓取网页
2009/07/13 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
基于python实现查询ip地址来源
2020/06/02 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
营销总经理岗位职责
2014/02/02 职场文书
2014年党支部承诺书
2014/05/30 职场文书
2015年副班长工作总结
2015/05/15 职场文书
初二英语教学反思
2016/02/15 职场文书
如何用python绘制雷达图
2021/04/24 Python
使用springMVC所需要的pom配置
2021/09/15 Java/Android