看下效果图：
<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><swiper current="{{currentTab}}" duration="300" bindchange="swiperTab" style='height:80%;'><swiper-item ><view>最新</view></swiper-item><swiper-item><view>热门</view></swiper-item><swiper-item><view>游戏</view></swiper-item></swiper>
page{height: 100%;}.swiper-tab{width: 100%;border-bottom: 2rpx solid #ccc;text-align: center;height: 88rpx;line-height: 88rpx;display: flex;flex-flow: row;justify-content: space-between;}.swiper-tab-item{width: 30%; color:#434343;}.active{color:#F65959;border-bottom: 4rpx solid #F65959;}swiper{text-align: center;}
var app = getApp()Page({data: {currentTab: 0},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数},//滑动切换swiperTab: function (e) {console.log(e);this.setData({currentTab: e.detail.current});},//点击切换clickTab: function (e) {var _this = this;if (_this.data.currentTab === e.target.dataset.current) {return false;} else {_this.setData({currentTab: e.target.dataset.current})}}})
想要获得更多资料的 请微信搜索公众号 【热血科技】，关注一下即可。
