<view class="contain"> <!-- 導(dǎo)航欄 --> <scroll-view class="tab" scroll-x scroll-left="{{tabScroll}}" scroll-with-animation="true"> <block wx:for="{{menuList}}" wx:key="index">  <view class="tab-item {{currentTab == index ? 'active' : ''}}" data-current="{{index}}" bindtap='clickMenu'>{{item.name}}</view> </block> </scroll-view> <!-- 頁面 --> <swiper class="content" style='height: {{height}}px' duration="1000" current="{{currentTab}}" bindchange="changeContent"> <swiper-item class="content-item" wx:for="{{menuList}}" wx:key="index">這里是{{item.name}}</swiper-item> </swiper></view>

Page({ data: { menuList: [{  name: "快車" }, {  name: "順風(fēng)車" }, {  name: "外賣" }, {  name: "單車" }, {  name: "禮橙專車" }, {  name: "出租車" }, {  name: "公交" }, {  name: "代駕" }, {  name: "豪華車" }, {  name: "自駕租車" }, {  name: "拼車" }, {  name: "二手車" }], tabScroll: 0, currentTab: 0, windowHeight: '', windowWidth: '' }, onLoad: function() {  wx.getSystemInfo({  // 獲取當(dāng)前設(shè)備的寬高，文檔有  success: (res) => {   this.setData({   windowHeight: res.windowHeight,   windowWidth: res.windowWidth  })  }, }) }, onReady: function() { wx.setNavigationBarTitle({ //修改標(biāo)題文字  title: '' }) }, clickMenu: function(e) { var current = e.currentTarget.dataset.current //獲取當(dāng)前tab的index var tabWidth = this.data.windowWidth / 5 // 導(dǎo)航tab共5個，獲取一個的寬度 this.setData({  tabScroll: (current - 2) * tabWidth //使點擊的tab始終在居中位置 })  if (this.data.currentTab == current) {  return false } else {  this.setData({currentTab: current }) } }, changeContent: function(e) { var current = e.detail.current // 獲取當(dāng)前內(nèi)容所在index,文檔有 var tabWidth = this.data.windowWidth / 5  this.setData({  currentTab: current,  tabScroll: (current - 2) * tabWidth }) }})

.contain{ width: 100%; height: 100%;}.tab{ width: 100%; height: 100rpx; position: fixed; top: 0; left: 0; z-index: 100; white-space: nowrap; box-sizing: border-box; overflow: hidden; line-height: 100rpx; }.tab-item{ display: inline-block; width: 20%; text-align: center; font-size: 14px; color: #8f9193;}.active{ color: #ff502c}.content{ padding-top: 100rpx; box-sizing: border-box; text-align: center; font-size: 14px;}.content-item{ overflow-y: scroll}