微信小程序实现Tab滑动切换

先上图

录制软件问题导致滑动过程中侧边有白边，实际模拟器和手机测试正常

因为在写项目的过程中需要写一个tab滑动切换的界面，微信小程序没有提供，所以就自己用swiper实现一个

主要是使用了swiper内的current属性以及组件通信的连接

代码

wxml:

<!-- Tab部分 --><tab-control class="tabcontrolclass" id="TestTabComponent" bind:sendIndex="getTabIndex" titles="{{['Tab1','Tab2','Tab3','Tab4']}}"></tab-control><!-- 内容部分 --><swiper class="TestTabBody" current="{{swipercurrent}}"bindchange="swipercurrentchange"circular="{{true}}"><swiper-item class="TestTabBody-item" item-id=""><!-- swiper-item --><view>我是内容1</view></swiper-item><swiper-item class="TestTabBody-item" item-id=""><!-- swiper-item --><view>我是内容2</view></swiper-item><swiper-item class="TestTabBody-item" item-id=""><!-- swiper-item --><view>我是内容3</view></swiper-item><swiper-item class="TestTabBody-item" item-id=""><!-- swiper-item --><view>我是内容4</view></swiper-item></swiper>

wxss:

.TestTabBody {height: 1000rpx;background: #eee;}.TestTabBody-item {height: 400rpx;background: #34ace0;margin-top: 10rpx;color: #fff;}.tabcontrolclass {border-bottom: 2rpx solid rgb(233, 229, 229);}

使用组件页面的js:

Page({data: {swipercurrent: 0},//获取当前tab的current值赋值给swiper的currentgetTabIndex(e) {this.setData({swipercurrent: e.detail.TabcurrentIndex})},//滑动内容，设置Tab跟着一起变化swipercurrentchange(e) {const tabcontrol = this.selectComponent('#TestTabComponent')tabcontrol.setData({currentIndex: e.detail.current})}})

组件wxml:

<view class="TestTabbar"><block wx:for="{{titles}}" wx:key="index"><!-- 获取tab点击的index然后设置一个currentIndex来控制点击的样式 --><view class="TestTabbar-item yahei-font {{currentIndex==index?'TestTabbarActive':''}}"bind:tap="handleClickTab"data-index="{{index}}"><text class="TestTabbarText">{{item}}</text></view></block> </view>

组件wxss:

.TestTabbar {display: flex;height: 60rpx;padding: 16rpx 0;border-bottom: 2rpx solid #BDBDBD;}.TestTabbar-item {flex: 1;text-align: center;line-height: 60rpx;font-weight: 550;color: #aaa69d;}.TestTabbarActive {color: #34ace0;}.TestTabbarActive text {border-bottom: #34ace0 solid 6rpx;padding: 18rpx 1rpx;}

组件js:

// Components/tab-contorl/tab-control.jsComponent({properties: {titles: {type: Array}},data: {currentIndex: 0},methods: {handleClickTab(e) {//拿到点击的indexconst index = e.currentTarget.dataset.indexthis.setData({currentIndex: index})//给页面传递目前点击的tabthis.triggerEvent('sendIndex', {TabcurrentIndex: index })}}})

这样就可以实现一个简单的滑动tab