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


Posted in Javascript onNovember 06, 2018

本文实例为大家分享了微信小程序实现选项卡效果展示的具体代码,供大家参考,具体内容如下

demo.wxss

.swiper-tab{ 
  width: 100%; 
  border-bottom: 2rpx solid #777777; 
  text-align: center; 
  line-height: 80rpx;} 
.swiper-tab-list{ font-size: 30rpx; 
  display: inline-block; 
  width: 33.33%; 
  color: #777777; 
} 
.on{ color: #da7c0c; 
  border-bottom: 5rpx solid #da7c0c;} 

.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; } 
.swiper-box view{ 
  text-align: center; 
}

demo.wxml

<view class="swiper-tab"> 
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈</view> 
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵</view> 
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">嘿嘿</view> 
</view> 

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> 
  <!-- 我是哈哈 --> 
  <swiper-item> 
   <view>我是哈哈</view> 
  </swiper-item> 
  <!-- 我是呵呵 --> 
  <swiper-item> 
   <view>我是呵呵</view> 
  </swiper-item> 
  <!-- 我是嘿嘿 --> 
  <swiper-item> 
   <view>我是嘿嘿</view> 
  </swiper-item> 
</swiper>

demo.js

Page( { 
 data: { 
  /** 
    * 页面配置 
    */ 
  winWidth: 0, 
  winHeight: 0, 
  // tab切换 
  currentTab: 0, 
 }, 
 onLoad: function() { 
  var that = this; 

  /** 
   * 获取系统信息 
   */ 
  wx.getSystemInfo( { 

   success: function( res ) { 
    that.setData( { 
     winWidth: res.windowWidth, 
     winHeight: res.windowHeight 
    }); 
   } 

  }); 
 }, 
 /** 
   * 滑动切换tab 
   */ 
 bindChange: function( e ) { 

  var that = this; 
  that.setData( { currentTab: e.detail.current }); 

 }, 
 /** 
  * 点击tab切换 
  */ 
 swichNav: function( e ) { 

  var that = this; 

  if( this.data.currentTab === e.target.dataset.current ) { 
   return false; 
  } else { 
   that.setData( { 
    currentTab: e.target.dataset.current 
   }) 
  } 
 } 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
js中for in的用法示例解析
Dec 25 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
JS中的phototype详解
Feb 04 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
webpack的pitching loader详解
Sep 23 Javascript
Vue props 单向数据流的实现
Nov 06 #Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 #Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 #Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 #Javascript
vue项目上传Github预览的实现示例
Nov 06 #Javascript
React Component存在的几种形式详解
Nov 06 #Javascript
支付宝小程序tabbar底部导航
Nov 06 #Javascript
You might like
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
php常用表单验证类用法实例
2015/06/18 PHP
php实现的简单检验登陆类
2015/06/18 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
python批量导出导入MySQL用户的方法
2013/11/15 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python装饰器用法实例总结
2018/02/07 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
.net面试题
2016/09/17 面试题
青安岗事迹材料
2014/05/14 职场文书
社区服务标语
2014/07/01 职场文书
公务员政审材料
2014/12/23 职场文书
产品调价通知函
2015/04/20 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书