vue-awesome-swiper カルーセル プラグイン (コード) の使用方法

この記事の内容は、vue-awesome-swiper カルーセル プラグイン (コード) の使用方法に関するものです。必要な方は参考にしていただければ幸いです。

モバイル端末カルーセル プラグイン。iview グラフィカル インターフェイス プラグインのカルーセル コンポーネントを使用してタッチ スライドを実現した後、vue-awesome-swiper プラグインに切り替えます

1。 npm インストール

npm i vue-awesome-swiper -S

ここに次のバージョンをインストールしました

##2 を使用してインポートします。グローバル:

#

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

• #コンポーネントの紹介
  #

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

#テンプレートで使用

• <swiper>
    <swiper-slide>
      <img  src="/static/imghwm/default1.png" data-src="item.image" class="lazy" alt="vue-awesome-swiper カルーセル プラグイン (コード) の使用方法" >
    </swiper-slide>
    <!-- 常见的小圆点 -->
    <p></p>
  </swiper>
  <!-- 显示数字 -->
  <p>{{imgIndex}}/{{detailimages.length}}</p>

##データ内の構成

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. 発生した問題

#このプラグインは、画像が 1 つしかない場合でも自動的にスクロールします

#ここで注意する必要があるのは、autoplay を直接 true に設定した場合、スライド画像をタッチした後、自動的にスクロールしなくなることです。この場合、最初は activeIndex を使用して対応するインデックス値を設定しましたが、後で前の画像にスライドしようとしたときに問題が発生したことがわかりました。 value もう対応しません。realIndex

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

を使用します。スワイパー コンテナでは、最後の画像と下端までスクロールすると自動的にスクロールが停止します。

• # と書いた後、小さなドットが表示されない問題が発生します。理由は、this.commodity のデータが最初に [] であり、その後にのみ値が存在するためです。割り当てられているので、最初に this.commodity かどうかを判断する必要があります。空の場合は、スワイパー コンテナ内で判断されます。データ長が 0 の場合、このコンテナは表示されません。推奨事項:

vue プラグインでスワイパー カルーセルを使用してカルーセル チャートを実装する方法 (コード分析)

• vue-awesome に関する質問-swiper プラグイン

以上がvue-awesome-swiper カルーセル プラグイン (コード) の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。