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


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 相关文章推荐
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
el-form 多层级表单的实现示例
Sep 10 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使用pear_smtp发送邮件
2016/04/15 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
客户端静态页面玩分页
2006/06/26 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
Python 面向对象部分知识点小结
2020/03/09 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
门卫岗位职责
2013/11/15 职场文书
法律进企业活动方案
2014/03/04 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js