微信小程序使用swiper制作tab切换效果

[复制链接]
hyt_xcx手机认证 实名认证 视频认证 发表于 2017-12-18 10:14:50 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
2017121112033732.gif
index
  1. <view class="swiper-tab">
  2. <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view>
  3. <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Seside2</view>
  4. <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Seside3</view>
  5. </view>
  6. <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
  7. <swiper-item>
  8.   <view>Seside1</view>
  9. </swiper-item>
  10. <swiper-item>
  11.   <view>Seside2</view>
  12. </swiper-item>
  13. <swiper-item>
  14.   <view>Seside3</view>
  15. </swiper-item>
  16. </swiper>
复制代码
css
  1. .swiper-tab{
  2.   width: 100%;
  3.   border-bottom: 2rpx solid #777777;
  4.   text-align: center;
  5.   line-height: 80rpx;
  6. }
  7. .swiper-tab-list{
  8.   font-size: 30rpx;
  9.   display: inline-block;
  10.   width: 20%;
  11.   color: #777777;
  12. }
  13. .on{
  14.   color: #da7c0c;
  15.   border-bottom: 5rpx solid #da7c0c;
  16. }
  17. .swiper-box{
  18.   display: block;
  19.   height: 100%;
  20.   width: 100%;
  21.   overflow: hidden;
  22. }
  23. .swiper-box view{
  24.   text-align: center;
  25. }
复制代码
js
  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page( {
  5. data: {
  6.   // 页面配置  
  7.   winWidth: 0,
  8.   winHeight: 0,
  9.   // tab切换
  10.   currentTab: 0,
  11. },
  12. onLoad: function() {
  13.   var that = this;
  14.   // 获取系统信息
  15.   wx.getSystemInfo( {
  16.    success: function( res ) {
  17.     that.setData( {
  18.      winWidth: res.windowWidth,
  19.      winHeight: res.windowHeight
  20.     });
  21.    }
  22.   });
  23. },
  24. // 滑动切换tab
  25. bindChange: function( e ) {
  26.   var that = this;
  27.   that.setData( { currentTab: e.detail.current });
  28. },
  29. // 点击tab切换
  30. swichNav: function( e ) {
  31.   var that = this;
  32.   if( this.data.currentTab === e.target.dataset.current ) {
  33.    return false;
  34.   }else{
  35.    that.setData( {
  36.     currentTab: e.target.dataset.current
  37.    })
  38.   }
  39. }
  40. })
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ- Archiver-手机版-小黑屋- 浩阳天社区  

Powered by Discuz! X3.2© 2001-2013 Comsenz Inc.  蜀ICP备16032957号-1