1.wxml代碼塊
<view class="swiper_tab_view">
? ? <scroll-view scroll-x='true' scroll-left="{{navleft}}" class='tab-h' scroll-with-animation="true">
? ? ? <view data-current="{{index}}" class="swiper-tab-list {{currentTab == index ? 'on' : ''}}" wx:for="{{titles}}" wx:key="key" bindtap="swichNav">{{item.title}} </view>
? ? </scroll-view>
? </view>
<swiper current="{{currentTab}}" class="swiper-box" duration="500" style="height:{{winHeight - 57}}px" bindchange="bindChange">
<<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-item>
? ? <view>體育</view>
? </swiper-item>>
? </swiper>
</view>
2.css的代碼
.page{
? width: 100%;
? height: 100%;
}
.content{
? width: 100%;
? height: 100%;
}
.tab-h{
? height: 57rpx;
? width: 100%;
? line-height: 51rpx;
? background: white;
? font-size: 16px;
? white-space: nowrap;
? z-index: 999;
? margin-top: 20rpx;
}
.swiper_tab_view{
? width: 100%;
? text-align: center;
? line-height: 80rpx;
}
.swiper-tab-list {
? font-size: 30rpx;
? display: inline-block;
? width: 20%;
? color: #777;
}
.on {
? color: #da7c0c;
? border-bottom: 5rpx solid #da7c0c;
}
.swiper-box {
? display: block;
? overflow: hidden;
? height: 100%;
}
.swiper-box view {
? text-align: left;
}
3.js的代碼
data: {
? ? titles:[
? ? ? {
? ? ? ? title:'視頻'
? ? ? },
? ? ? {
? ? ? ? title:'推薦'
? ? ? },
? ? ? {
? ? ? ? title:'上海'
? ? ? },
? ? ? {
? ? ? ? title:'娛樂'
? ? ? },
? ? ? {
? ? ? ? title:'體育'
? ? ? }
? ? ],
? ? currentTab: 0,//當前點擊的選項卡下標
? ? navleft:0,//需要選項卡左移的位置距離
? ? winWidth: wx.getSystemInfoSync().windowWidth,
? ? winHeight: wx.getSystemInfoSync().windowHeight,
? },
swichNav:function(e){
? ? let cur = e.target.dataset.current //獲取當前點擊的下標
? ? let width = wx.getSystemInfoSync().windowWidth
? ? let left =? (cur - 2)*width/5//計算出居中所需要的偏移量
? ? if ( cur != this.data.currentTab) {//如果點擊了其他選項卡則進行偏移尚猿，改變顏色
? ? ? this.setData({
? ? ? ? currentTab:cur,
? ? ? ? navleft:left
? ? ? })
? ? }
? },
? bindChange: function (e) {
? ? var that = this;
? ? let width = that.data.winWidth
? ? let left =? (e.detail.current - 2)*width/5
? ? ?that.setData({
? ? ? currentTab: e.detail.current,
? ? ? navleft:left
? ? });
? ? ? this.checkCor();
? },
? checkCor:function(){
? ? if(this.data.currentTab>4){
? ? ? this.setData({
? ? ? ? scrollleft:300
? ? ? })
? ? }else{
? ? ? this.setData({
? ? ? ? scrollleft:0
? ? ? })
? ? }
? },
