用swiper实现tab列表切换

用swiper实现tab列表切换

最后修改时间:3 months ago

结果如下: 在这里插入图片描述

代码如下:

<swiper class="swiper-class swiper-no-swiping" :options="swiperOption">
        <!-- 再次注意 指令内要用带引号括起来 -->
        <swiper-slide>
          <van-list
            v-show="!page"
            offset="0"
            v-model="myExaminationLoading"
            :finished="myExaminationinished"
            finished-text="没有更多了"
            @load="myExaminationinOnLoads(1)"
          >
            <div class="jira-list-select-content">
              <div v-for="(item, index) in listForExmation" :key="index">
                <Jira-card-search
                  :cardItem="item"
                  @click.native="goDetail(item.key)"
                ></Jira-card-search>
              </div>
            </div>
          </van-list>
        </swiper-slide>

        <swiper-slide>
          <van-list
            v-show="page"
            offset="0"
            v-model="myLoading"
            :finished="myFinished"
            finished-text="没有更多了"
            @load="myExaminationinOnLoads(2)"
          >
            <div class="jira-list-select-content">
              <div v-for="(item, index) in listForMaine" :key="index">
                <Jira-card-search
                  :cardItem="item"
                  @click.native="goDetail(item.key)"
                ></Jira-card-search>
              </div>
            </div>
          </van-list>
        </swiper-slide>
      </swiper>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

其中夹杂了一个vant 轮播图配置

      swiperOption: {
        //轮播图配置
        //上一张下一张
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        observer: true, //修改swiper自己或子元素时,自动初始化swiper
        observeParents: true, //修改swiper的父元素时,自动初始化swiper
        onSlideChangeEnd: (swiper) => {
          //滑动之后回调函数
          //切换结束时,告诉我现在是第几个slide
        },
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

给上面的tab+上一个 nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", 的类就可以控制轮播图的翻页操作了 注: 轮播图引入文件:

import { swiper, swiperSlide, directive } from "vue-awesome-swiper";
import "swiper/src/swiper.scss";
1
2

vue-awesome-swiper版本号:

    "vue-awesome-swiper": "^3.1.3",
1
- 全文完 -

留下一条留言?
默认颜色

主题颜色

标准颜色

更多颜色...