So verwenden Sie das Vue-awesome-swiper-Karussell-Plug-in (Code)

Der Inhalt dieses Artikels befasst sich mit der Verwendung des Vue-Awesome-Swiper-Karussell-Plugins (Code). Ich hoffe, dass er für Sie hilfreich ist.

Karussell-Plug-in für mobile Endgeräte: Nachdem Sie die Karussellkomponente im Plug-in für die grafische Benutzeroberfläche von iview verwendet haben, um Touch-Slide zu erreichen, verwenden Sie stattdessen das Vue-awesome-swiper-Plug-in

1. npm-Installation

npm i vue-awesome-swiper -S

Ich habe die folgende Version hier installiert

2. Verwenden Sie

• globalen Import :

import Vue from 'vue'
import vueSwiper from 'vue-awesome-swiper'
/* 样式的话，我这里有用到分页器，就在全局中引入了样式 */
import 'swiper/dist/css/swiper.css'
Vue.use(vueSwiper);

• Komponenteneinführung

import { swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css");
components: {
  swiper,
  swiperSlide
},

• Verwenden Sie

in der Vorlage

<swiper>
  <swiper-slide>
    <img  alt="So verwenden Sie das Vue-awesome-swiper-Karussell-Plug-in (Code)" >
  </swiper-slide>
  <!-- 常见的小圆点 -->
  <p></p>
</swiper>
<!-- 显示数字 -->
<p>{{imgIndex}}/{{detailimages.length}}</p>

• Konfiguration in Daten

data() {
    const that = this;
    return {
      imgIndex: 1,
      swiperOption: {
        //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        //循环
        loop: true,
        //设定初始化时slide的索引
        initialSlide: 0,
        //自动播放
        autoplay: {
          delay: 1500,
          stopOnLastSlide: false,
          /* 触摸滑动后是否继续轮播 */
          disableOnInteraction: false
        },
        //滑动速度
        speed: 800,
        //滑动方向
        direction: "horizontal",
        //小手掌抓取滑动
        grabCursor: true,
        on: {
          //滑动之后回调函数
          slideChangeTransitionStart: function() {
            /* realIndex为滚动到当前的slide索引值 */
            that.imgIndex= this.realIndex - 1;
          },
        },
        //分页器设置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets"
        }
      }
   };
},

3. Es sind Probleme aufgetreten

• Dieses Plug-in scrollt immer noch automatisch, wenn nur ein Bild vorhanden ist

Eine wichtige Sache, die hier zu beachten ist, ist, dass wenn Sie die automatische Wiedergabe direkt auf „true“ setzen, nachdem Sie das verschiebbare Bild berührt haben, es nicht mehr automatisch scrollt

/* 这里我是在使用接口请求后，对返回的数据进行判断 */
created() {
  this.$Request({
    url: '',
    method: 'get',
    success: res => {
      this.swiperOption.autoplay = res.result.data.length != 1 ? {
        delay: 1500,
        stopOnLastSlide: false,
        disableOnInteraction: false
        } : false;
     }
  })
}

• Achten Sie auf die Methode „slideChangeTransitionStart“. Zu Beginn habe ich activeIndex verwendet, um den entsprechenden Indexwert festzulegen. Beim Übergang zum nächsten Bild wurde später festgestellt, dass ein Problem aufgetreten ist entspricht nicht mehr. Verwenden Sie realIndex

on: {
   slideChangeTransitionStart: function() {
      that.imgIndex = this.realIndex + 1;
   },
},

• Im Swiper-Container wird das Scrollen automatisch gestoppt, nachdem zum letzten Bild gescrollt wurde Das Problem, dass die kleinen Punkte nach dem Schreiben von

nicht angezeigt werden, liegt daran, dass die Daten von this.commodity am Anfang [] stehen und der Wert erst nach der Zuweisung erhalten wird Sie müssen zuerst feststellen, ob this.commodity leer ist, die Beurteilung erfolgt hier im Swiper-Container. Wenn die Datenlänge 0 ist, wird dieser Container nicht angezeigt

<swiper></swiper>

Verwandte Empfehlungen:

So verwenden Sie das Swiper-Karussell im Vue-Plug-in zur Implementierung eines Karusselldiagramms (Code-Analyse)

Fragen zum vue-awesome-swiper-Plug-in

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Vue-awesome-swiper-Karussell-Plug-in (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!