具體效果：手指在頁面左右滑動會切換tab

?背景：項目里原有代碼復(fù)制，去除一些功能，只留一個外殼，目的是為了以后套套套

代碼：

<template>
  <div class="page" style="overflow:hidden">
    <!-- 標題欄 -->
    <div class="nav">
      <div
        @click="toggleSearch(item.value)"
        :class="['nav_item', compleStatus == item.value ? 'selected' : '']"
        v-for="(item, index) in titleList"
        :key="index"
      >
        <div class="nav_title">
          {{ `${item.title}` }}
        </div>
        <div class="task_tabs_line_wrapper">
          <div
            class="task_tabs_line"
            :style="{
              width: 100 / titleList.length + '%',
              transform: `translateX(${tabsIndex * 100}%);`
            }"
          >
            <div class="inside_line"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <!-- 列表 -->
      <swiper
        class="taskList_swiper"
        @change="changeSwiper"
        :current="tabsIndex"
      >
        <swiper-item class="taskList_swiper_item" v-for="(i, index) in titleList" :key="index">
          <div>
            <div>內(nèi)容區(qū)域</div>
            <div>內(nèi)容區(qū)域</div>
            <div>內(nèi)容區(qū)域</div>
            <div>內(nèi)容區(qū)域</div>
            <div>內(nèi)容區(qū)域</div>
            <div>內(nèi)容區(qū)域</div>
            <div>內(nèi)容區(qū)域</div>
            <div>內(nèi)容區(qū)域</div>
            <div>內(nèi)容區(qū)域</div>
            <div>內(nèi)容區(qū)域</div>
            <div>內(nèi)容區(qū)域</div>
            <div>內(nèi)容區(qū)域</div>
            <div>內(nèi)容區(qū)域</div>
            <div>內(nèi)容區(qū)域</div>
          </div>
          <!-- <scroll-view
            class="content"
            scroll-y="true"
            refresher-enabled
            :scroll-top="scrollTop"
            :refresher-triggered="triggered"
            @scrolltolower="lower"
            @refresherrefresh="onRefresherrefresh"
          >
            <view class="page_wrap">
              <div class="list">
                <template>
                  <div>內(nèi)容區(qū)域</div>
                </template>
              </div>
            </view>
          </scroll-view> -->
        </swiper-item>
      </swiper>
    </div>

    <!-- 學(xué)習中心 -->
    <studyCenter v-if="false" />
  </div>
</template>

<script>
import studyCenter from '../study-center.vue'
export default {
  name: 'advanced-page',
  components: {
    studyCenter
  },
  data() {
    return {
      titleList: [
        // 標題列表
        {
          title: '白銀級', // 標題名
          value: 0, // 標題編號
          count: 0
        },
        {
          title: '黃金級',
          value: 1,
          count: 0
        },
        {
          title: '鉑金級',
          value: 2,
          count: 0
        },
        {
          title: '鉆石級',
          value: 3,
          count: 0
        },
        {
          title: '王者級',
          value: 4,
          count: 0
        }
      ],
      tabsIndex: 0, // 輪播圖當前所在滑塊的 index
      compleStatus: 0, // 表示所選的nav
      scrollTop: 0, // 滾動過程中離頂端的距離
      taskList: [], // 活動列表
    }
  },
  methods: {
    // 點擊切換標題的回調(diào)
    toggleSearch(val) {
      this.tabsIndex = val
      this.compleStatus = val
    },
    // 左右滑動切換標題的回調(diào)
    changeSwiper(e) {
      let val = e.target.current
      this.taskList = []
      this.toggleSearch(val)
      console.log('-----------獲取數(shù)據(jù)-----------')
    }
  }
}
</script>

<style lang="scss" scoped>
.nav {
  border-bottom: 2rpx solid rgba(31, 35, 41, 0.1);
  position: fixed;
  z-index: 99;
  background: #fff;
  padding-top: 20rpx;
  padding-bottom: 18rpx;
  width: 100%;
  display: flex;
  height: 104upx;
  .nav_item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .nav_title {
      font-size: 28rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: #8f959e;
      line-height: 40rpx;
    }
    .task_tabs_line_wrapper {
      position: absolute;
      bottom: 16rpx;
      left: 0;
      height: 4rpx;
      width: 100%;
      .task_tabs_line {
        height: 4rpx;
        transition: all 0.2s ease;
        .inside_line {
          width: 60rpx;
          margin: 0 auto;
          height: 4rpx;
          background: #3865f3;
          border-radius: 4rpx;
        }
      }
    }
  }
  .selected {
    .nav_title {
      color: #1f2329;
    }
  }
}
.main {
  position: relative;
  margin-top: 104rpx;
  background-color: rgb(243, 182, 182);

  .taskList_swiper {
    width: 100%;
    height: calc(100vh - 168rpx);
    .page_wrap {
      min-height: 100%;
      padding: 24rpx 20rpx 20rpx 20rpx;
    }
    .content {
      height: calc(100vh - 128rpx);
    }
  }
}
</style>

注意：scroll-view標簽內(nèi)實現(xiàn)上來加載、下來刷新。因為現(xiàn)在頁面用不到，所以并沒有保留文章來源地址http://www.zghlxwxcb.cn/news/detail-528590.html

到了這里，關(guān)于【uniapp小程序】使用swiper實現(xiàn)頁面內(nèi)部左右滑動的切換的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！