效果圖圖片如下

?

實現代碼xml中

<view class="swiper_tab_view"><scroll-view scroll-x='true' scroll-left="{{scrollleft}}" class='tab-h'><view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"bindtap="swichNav">要聞</view> <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">視頻</view><view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">推薦</view> <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">上海</view> <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">娛樂</view> <view class="swiper-tab-list {{currentTab==5 ? 'on' : ''}}" data-current="5" bindtap="swichNav">體育</view>  </scroll-view>
</view><swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}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-item>  <view>體育</view>  </swiper-item></swiper>

js

Page({/*** 頁面的初始數據*/data: {winWidth: 0,winHeight: 0,scrollleft:0,currentTab: 0,  },/** * 滑動切換tab */bindChange: function (e) {var that = this;that.setData({currentTab: e.detail.current});this.checkCor();},/** * 點擊tab切換 */swichNav: function (e) {var that = this;if (this.data.currentTab === e.target.dataset.current) {return false;} else {that.setData({currentTab: e.target.dataset.current})}},checkCor:function(){if(this.data.currentTab>4){this.setData({scrollleft:300})}else{this.setData({scrollleft:0})}},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {var that = this;/** * 獲取系統信息 */wx.getSystemInfo({success: function (res) {that.setData({winWidth: res.windowWidth,winHeight: res.windowHeight});}});  },

wxss

/**index.wxss**/
.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;height: 100%;width: 100%;overflow: hidden;
}.swiper-box view {text-align: center;
}

這樣實現了效果如果頂部tab不是很多的話就可以不實用scroll-view 嵌套在外層

忘了參考誰的代碼寫的了,實在抱歉, 這里就不給出demo了,復制過去就可以實現效果,

?

總結

以上是生活随笔為你收集整理的微信小程序顶部tab切换以及滑动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。