微信小程序中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切换"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！