关于前端:vue中使用vueawesomeswiper遇到的一些问题

38次阅读

共计 5702 个字符，预计需要花费 15 分钟才能阅读完成。

最近开发 pc 官网，用到了轮播图，在这里记录一下应用过程中遇到的问题。
之前用 jquery 开发我的项目的时候，用的是 swiper3。当初用 vue 开发，我一开始尝试用了最新的 swiper6，我把官网的 demo 里的代码复制过去，后果发现要不是下标小圆点生效，要不就是切换性能生效，不晓得问题出在哪里。搞了很久，最初用了 swiper3 的应用办法。

轮播图引入的版本是 ”vue-awesome-swiper”: “^2.6.7”,
main.js 外面写的是

import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options} */)

HTML 内容：

    <swiper v-if="ListBanner.length" :options="swiperOption" class="swiper-container swiper-container1 wow fadeInUp"
      ref="mySwiper">
      <!-- slides -->
      <swiper-slide class="swiper-item" v-for="(item, index) of ListBanner" :key="index">
        <img class="swiper-img" :src="item.banner" alt="" />
      </swiper-slide>
      <!-- Optional controls , 显示小点 -->
      <div class="swiper-pagination" slot="pagination" v-if="ListBanner.length > 1"></div>
      <!-- 左右切换 -->
      <!-- <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div> -->
    </swiper>

data 里的配置：

        swiperOption: {
          // 参数选项, 显示小点
          pagination: ".swiper-pagination",
          paginationClickable: true,
          // 循环
          loop: true,
          // 每张播放时长 3 秒，自动播放
          autoplay: 2000,
          // 用户操作 swiper 之后，是否禁止 autoplay
          autoplayDisableOnInteraction: false,
          // 滑动速度
          speed: 1000,
          // delay:1000
          prevButton: ".swiper-button-prev",
          nextButton: ".swiper-button-next",

          observer: true, // 批改 swiper 本人或子元素时，主动初始化 swiper
          observeParents: true, // 批改 swiper 的父元素时，主动初始化 swiper

          onSlideChangeStart: function (swiper) {
            that.active = swiper.realIndex;
            //   this.realIndex + 1
            // console.log(swiper.realIndex);
          },
        },

computed 里的配置（我写的代码也参考了好多其余前辈的代码，我感觉写得挺好的）

    computed: {swiper() {return this.$refs.mySwiper.swiper;}
    },

而后上面就能够应用了，因为我的轮播图图片是 ajax 申请回来的，所以须要在轮播图的容器上写一个判断

否则会呈现页面加载实现轮播图会滚动到最初一张的 bug。

而后我这边还有一个需要，只有图片大于一张才会主动轮播，所以代码要填加一下：
mounted 里的：

      Home().then((response) => {console.log(response.data, "Home");
        if (response.data.ReturnCode == 0) {if (response.data.Data) {
            var data = response.data.Data;
            this.ListBanner = data[0].ListBanner;
            // this.ListNews = data[0].ListNews;
            this.ListPhysician = data[0].ListPhysician;

            this.$nextTick(() => {if (this.ListBanner.length <= 1) {this.swiper.stopAutoplay();
                this.swiper.lockSwipes();}
              if (this.ListPhysician.length <= 1) {this.swiper3.stopAutoplay();
                this.swiper3.lockSwipes();}

              this.wowFun();});
            // console.log(this.ListNews);

            // new WOW().init();
          }
        }
      });

肯定要放在 this.$nextTick 里的判断才会失效。
this.swiper.stopAutoplay(); 是进行主动轮播
this.swiper.lockSwipes(); 是禁止滑动
如果不显示小圆点和左右切换，加上 v -if=”ListBanner.length > 1″ 就能够了。

如果要实现工夫管制轮播图轮播图，如图:

        swiperOption: {
          // 参数选项, 显示小点
          pagination: ".swiper-pagination",
          paginationClickable: true,
          // 循环
          loop: true,
          // 每张播放时长 3 秒，自动播放
          autoplay: 2000,
          // 用户操作 swiper 之后，是否禁止 autoplay
          autoplayDisableOnInteraction: false,
          // 滑动速度
          speed: 1000,
          // delay:1000
          prevButton: ".swiper-button-prev",
          nextButton: ".swiper-button-next",

          onSlideChangeStart: function (swiper) {
            that.active = swiper.realIndex;
            //   this.realIndex + 1
            // console.log(swiper.realIndex);
          },
        },

事件写在 onSlideChangeStart 外面
管制轮播图的滚动写在：methods 外面(didi 是我轻易起的名字，是那个点击工夫日期的事件)：

      didi(index) {
        this.active = index;
        this.swiper.slideTo(index + 1, 1000, false);
      },

这是我首页轮播图配置的全副代码（不相干的删掉了一些）：

<template>
  <div class="index">
    <commonHeader></commonHeader>
    <!-- <router-link to="/a">
      <p> 跳转 a 页面 </p>
    </router-link>
    <router-link to="/b">
      <p> 跳转 b 页面 </p>
    </router-link> -->

    <!-- <p> 我是首页 </p> -->

    <!-- isKeep -->
    <swiper v-if="ListBanner.length" :options="swiperOption" class="swiper-container swiper-container1 wow fadeInUp"
      ref="mySwiper">
      <!-- slides -->
      <swiper-slide class="swiper-item" v-for="(item, index) of ListBanner" :key="index">
        <img class="swiper-img" :src="item.banner" alt="" />
      </swiper-slide>
      <!-- Optional controls , 显示小点 -->
      <div class="swiper-pagination" slot="pagination" v-if="ListBanner.length > 1"></div>
      <!-- 左右切换 -->
      <!-- <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div> -->
    </swiper>
    <!-- <div class="banner" v-if="ListBanner.length == 1">
        <img class="banner-img" :src="ListBanner[0].banner" alt="">
      </div> -->

    <commonFooter></commonFooter>
  </div>
</template>

<script>
  // ajax
  import {Home, NewsListTop} from "@/assets/js/api";
  // vuex
  import {mapState, mapGetters, mapMutations, mapActions} from "vuex";
  // import {Swiper, SwiperItem} from 'vux'
  import commonHeader from "@/components/header";
  import commonFooter from "@/components/footer";

  import {WOW} from "wowjs";

  export default {
    name: "home",
    components: {
      commonHeader,
      commonFooter,
    },
    data() {
      const that = this;
      return {
        // 轮播图
        ListBanner: [],
        // 新闻
        ListNews: [],
        // 名医荟萃
        ListPhysician: [],

        swiperOption: {
          // 参数选项, 显示小点
          pagination: ".swiper-pagination",
          paginationClickable: true,
          // 循环
          loop: true,
          // 每张播放时长 3 秒，自动播放
          autoplay: 2000,
          // 用户操作 swiper 之后，是否禁止 autoplay
          autoplayDisableOnInteraction: false,
          // 滑动速度
          speed: 1000,
          // delay:1000
          prevButton: ".swiper-button-prev",
          nextButton: ".swiper-button-next",

          observer: true, // 批改 swiper 本人或子元素时，主动初始化 swiper
          observeParents: true, // 批改 swiper 的父元素时，主动初始化 swiper

          onSlideChangeStart: function (swiper) {
            that.active = swiper.realIndex;
            //   this.realIndex + 1
            // console.log(swiper.realIndex);
          },
        },



        // isKeep: true,
      };
    },
    computed: {swiper() {return this.$refs.mySwiper.swiper;},

    },
    methods: {// didi(index) {
      //   this.active = index;
      //   this.swiper.slideTo(index + 1, 1000, false);
      // },
      enter() {// alert(1)
        this.swiper2.stopAutoplay();},
      leave() {this.swiper2.startAutoplay();
      },
      // wow 动画
      wowFun() {
        var wow = new WOW({
          // 间隔可视区域多少开始执行动画
          offset: 150,
          // 异步加载的内容是否无效
          live: true,
        });
        wow.init();},




    },
    created() {},
    mounted() {console.log(document.documentElement.scrollTop)


      Home().then((response) => {console.log(response.data, "Home");
        if (response.data.ReturnCode == 0) {if (response.data.Data) {
            var data = response.data.Data;
            this.ListBanner = data[0].ListBanner;
            // this.ListNews = data[0].ListNews;
            this.ListPhysician = data[0].ListPhysician;

            this.$nextTick(() => {if (this.ListBanner.length <= 1) {this.swiper.stopAutoplay();
                this.swiper.lockSwipes();}
              if (this.ListPhysician.length <= 1) {this.swiper3.stopAutoplay();
                this.swiper3.lockSwipes();}

              this.wowFun();});
            // console.log(this.ListNews);

            // new WOW().init();
          }
        }
      });

    },

    activated() {},

    deactivated() {},
  };
</script>


<style lang="scss" scoped>
  @import "~@/assets/scss/home.scss";
</style>

这是我在 vue 中应用轮播图遇到的一些问题，心愿能帮到须要的人。

正文完
前端
发表至： 前端
2020-10-22
 0
关于前端:前端面试每日-31-第963天
关于前端:通过构建自己的JavaScript测试框架来了解JS测试
关于前端:vue3-路由配置-路由匹配到404页面
关于前端:前端面试题-数组扁平化方法总结