效果：
wxml:
<view class="swiper-tab"><view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">一</view><view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">二</view><view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">三</view><view class="swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">四</view>
</view><swiper class='swi' current="{{currentTab}}" duration="300" bindchange="swiperTab"><swiper-item><view>第一屏</view></swiper-item><swiper-item><view>第二屏</view></swiper-item><swiper-item><view>第三屏</view></swiper-item><swiper-item><view>第四屏</view></swiper-item>
</swiper>js:
var app=getApp()
Page({data:{currentTab:0},onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数},//滑动切换swiperTab:function( e ){var that=this;that.setData({currentTab:e.detail.current});},//点击切换clickTab: function( e ) { var that = this; if( this.data.currentTab === e.target.dataset.current ) { return false; } else { that.setData( { currentTab: e.target.dataset.current }) } } })wxss:
.swi {width: 100%;height: 100vh;}
.swiper-tab{width: 100%;border-bottom: 2rpx solid #ccc;text-align: center;height: 88rpx;line-height: 88rpx;font-weight: bold;
}
.swiper-tab-item{display: inline-block;width: 25%;color:red;
}
.active{color:aqua;border-bottom: 4rpx solid red;
}本文链接：https://my.lmcjl.com/post/3152.html
展开阅读全文
4 评论