微信小程序的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 相关文章推荐
javascript之函数直接量(function(){})()
Jun 29 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
JavaScript原型链详解
Nov 07 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 MSSQL 分页实例
2016/04/13 PHP
php日期操作技巧小结
2016/06/25 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
python类继承用法实例分析
2015/05/27 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
Django中处理出错页面的方法
2015/07/15 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
Django 多环境配置详解
2019/05/14 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
专项法律服务方案
2014/06/11 职场文书
现场施工员岗位职责
2015/04/11 职场文书
2015年大学生工作总结
2015/04/21 职场文书
会计实训总结范文
2015/08/03 职场文书
企业文化学习心得体会
2016/01/21 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
Mysql事务索引知识汇总
2022/03/17 MySQL
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏