微信小程序 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 相关文章推荐
Javascript判断对象是否相等实现代码
Mar 18 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 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
Zerg基本策略
2020/03/14 星际争霸
PHP5 安装方法
2007/01/15 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
js脚本实现数据去重
2014/11/27 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
打包发布Python模块的方法详解
2016/09/18 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
Python datetime模块的使用示例
2021/02/02 Python
骨干教师培训制度
2014/01/13 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
欠条格式范本
2015/07/03 职场文书
担保书范文
2019/07/09 职场文书