小程序如何实现tab和swiper切换效果

这篇文章主要介绍小程序如何实现tab和swiper切换效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

小程序实现tab和swiper切换效果展示的具体代码，具体内容如下

先上效果图：

实现代码如下：

wxml页面

<scroll-view scroll-x="true" class="weui-navbar">   <block wx:for-items="{{tabs}}">   <view id="{{index}}" class="{{activeIndex == index ?'item_on':''}} default-item" bindtap="tabClick" style="width:{{tabW}}px">   {{item}}   </view>  </block>  <view class="weui-navbar-slider" style="transform:translateX({{slideOffset}}px);"></view> </scroll-view> <view class="rec" /> <swiper current="{{activeIndex}}" class="swiper-box" duration="100" bindchange="bindChange">  <swiper-item class="swiper-item">   <view class="slide-view">tab0</view>  </swiper-item>   <swiper-item class="swiper-item">   <view class="slide-view">tab1</view>  </swiper-item>   <swiper-item class="swiper-item">   <view class="slide-view">tab2</view>  </swiper-item>   <swiper-item class="swiper-item">   <view class="slide-view">tab3</view>  </swiper-item>  <swiper-item class="swiper-item">   <view class="slide-view">tab4</view>  </swiper-item>   <swiper-item class="swiper-item">   <view class="slide-view">tab5</view>  </swiper-item>   <swiper-item class="swiper-item">   <view class="slide-view">tab6</view>  </swiper-item> </swiper>

wxss样式：

page {  height: 100%; } view , scroll-view{  padding: 0px;  margin: 0px; } .weui-navbar{  width: 100%;  position: fixed;  border-bottom: 1px solid #00bba1;  box-sizing: border-box;  white-space: nowrap;   z-index: 100;  background: white; } .rec{  width: 100%;  height: 7%; } .weui-navbar .default-item{  /*width:25%;*/  display: inline-block;  text-align: center;  font-size: 32rpx;  box-sizing: border-box;  height: 7%;  padding-bottom: 20rpx; } .weui-navbar .item_on{  color: #00bba1; } .weui-navbar-slider{  position: absolute;  width: 160rpx;  height: 2px;  content:"";  background: #00bba1;  bottom: 0px;  left: 12.5rpx;  transition: transform .3s; } .swiper-box{  height: 900px;  border-bottom: 1px solid #d1d1d1; } .swiper-box .swiper-item{  text-align: center;  padding-top: 200rpx;  height: 100%; }

js代码：

//index.js //获取应用实例 var app = getApp(); var mtabW; Page({  data: {  tabs:["综合与绘画","艺术喷漆","泥塑","纸面绘画","布面绘画","中国油画","水墨画"],  activeIndex:0,  slideOffset:0,  tabW:0  },  //事件处理函数  onLoad: function () {   var that = this;   wx.getSystemInfo({    success: function (res) {     mtabW = res.windowWidth / 4; //设置tab的宽度     that.setData({      tabW:mtabW     })    }   });  },  bindViewTap: function() {  wx.navigateTo({   url: '../logs/logs'  })  },  tabClick:function(e){   var that = this;   var idIndex = e.currentTarget.id;   var offsetW = e.currentTarget.offsetLeft; //2种方法获取距离文档左边有多少距离   this.setData({   activeIndex:idIndex,   slideOffset:offsetW   });  },  bindChange:function(e){   var current = e.detail.current;   if((current+1)%4 == 0){   }   var offsetW = current * mtabW; //2种方法获取距离文档左边有多少距离   this.setData({    activeIndex:current,    slideOffset:offsetW   });  } })

以上是“小程序如何实现tab和swiper切换效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！