微信小程序中swiper怎么制作tab切换-创新互联

这篇文章主要介绍“微信小程序中swiper怎么制作tab切换”，在日常操作中，相信很多人在微信小程序中swiper怎么制作tab切换问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序中swiper怎么制作tab切换”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

微信小程序 swiper制作tab切换

实现效果图：

swiper制作tab切换

index.html

 Seside1
 Seside2
 Seside3


 
  Seside1
 
 
  Seside2
 
 
  Seside3
 

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 
   }) 
  } 
 } 
})

到此，关于“微信小程序中swiper怎么制作tab切换”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！