微信小程序 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 相关文章推荐
5 cool javascript apps
Mar 24 Javascript
extjs fckeditor集成代码
May 10 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
微信小程序之拖拽排序(代码分享)
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截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
理解 JavaScript 预解析
2009/10/25 Javascript
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
layui表格实现代码
2017/05/20 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
JavaScript对象原型链原理解析
2020/01/22 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
Python按钮的响应事件详解
2019/03/04 Python
django-filter和普通查询的例子
2019/08/12 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
网络宣传方案
2014/03/15 职场文书
化工操作工岗位职责
2014/04/29 职场文书
养成教育经验材料
2014/05/26 职场文书
全国文明单位申报材料
2014/05/31 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
个人年终总结范文
2015/03/09 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
日元符号 ¥
2022/02/17 杂记