【uniapp小程序】使用swiper实现页面内部左右滑动的切换-Toy模板网

这篇具有很好参考价值的文章主要介绍了【uniapp小程序】使用swiper实现页面内部左右滑动的切换。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

具体效果：手指在页面左右滑动会切换tab

uniapp左右滑动切换页面,uni-app,小程序,前端

背景：项目里原有代码复制，去除一些功能，只留一个外壳，目的是为了以后套套套

代码：

<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>内容区域</div>
            <div>内容区域</div>
            <div>内容区域</div>
            <div>内容区域</div>
            <div>内容区域</div>
            <div>内容区域</div>
            <div>内容区域</div>
            <div>内容区域</div>
            <div>内容区域</div>
            <div>内容区域</div>
            <div>内容区域</div>
            <div>内容区域</div>
            <div>内容区域</div>
            <div>内容区域</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>内容区域</div>
                </template>
              </div>
            </view>
          </scroll-view> -->
        </swiper-item>
      </swiper>
    </div>

    <!-- 学习中心 -->
    <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: {
    // 点击切换标题的回调
    toggleSearch(val) {
      this.tabsIndex = val
      this.compleStatus = val
    },
    // 左右滑动切换标题的回调
    changeSwiper(e) {
      let val = e.target.current
      this.taskList = []
      this.toggleSearch(val)
      console.log('-----------获取数据-----------')
    }
  }
}
</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标签内实现上来加载、下来刷新。因为现在页面用不到，所以并没有保留文章来源地址https://www.toymoban.com/news/detail-528590.html

到了这里，关于【uniapp小程序】使用swiper实现页面内部左右滑动的切换的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！