微信小程序 swiper制作tab切换实现附源码


Posted in Javascript onJanuary 21, 2017

微信小程序 swiper制作tab切换

实现效果图:

微信小程序 swiper制作tab切换实现附源码

swiper制作tab切换

index.html

<view class="swiper-tab">
 <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view>
 <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Seside2</view>
 <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Seside3</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
 <swiper-item>
  <view>Seside1</view>
 </swiper-item>
 <swiper-item>
  <view>Seside2</view>
 </swiper-item>
 <swiper-item>
  <view>Seside3</view>
 </swiper-item>
</swiper>

index.css

.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: 20%; 
  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; 
}

index.js

//index.js 
//获取应用实例 
var app = getApp() 
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 
   }) 
  } 
 } 
})

源码下载:http://xiazai.3water.com/201701/yuanma/tabdemo03(3water.com).rar

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
子页向父页传值示例
Nov 27 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 #Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 #Javascript
JavaScript数组去重的6个方法
Jan 21 #Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 #Javascript
JS常用知识点整理
Jan 21 #Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 #Javascript
原生js实现可拖动的登录框效果
Jan 21 #Javascript
You might like
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
JS实现根据出生年月计算年龄
2014/01/10 Javascript
javascript版2048小游戏
2015/03/18 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
js实现日历与定时器
2017/02/22 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
js断点调试经验分享
2017/12/08 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
python开发中range()函数用法实例分析
2015/11/12 Python
Python验证码识别处理实例
2015/12/28 Python
Python字符串切片操作知识详解
2016/03/28 Python
Python格式化输出%s和%d
2018/05/07 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
行政管理毕业生自荐信
2014/02/24 职场文书
软件售后服务方案
2014/05/29 职场文书
教师节横幅标语
2014/10/08 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
2014年库房工作总结
2014/11/26 职场文书
团委工作总结2015
2015/04/02 职场文书
风之谷观后感
2015/06/11 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
Java实现房屋出租系统详解
2021/10/05 Java/Android