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


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 相关文章推荐
js 中{},[]中括号,大括号使用详解
May 12 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 Javascript
详解javascript脚本何时会被执行
Feb 05 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
input file获得文件根目录简单实现
2013/04/26 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
php截取中文字符串函数实例
2015/02/23 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
vue组件与复用详解
2018/04/08 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
Python抓取电影天堂电影信息的代码
2016/04/07 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
《她是我的朋友》教学反思
2014/04/26 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
世界红十字日活动总结
2015/02/10 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
英语辞职信怎么写
2015/02/28 职场文书
基层党支部承诺书
2015/04/30 职场文书
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技