使用vue完成移动端轮播图:vue-awesome-swiper3.x 基本使用

一、说明

vue-awesome-swiper是基于swiper的,安装不同版本的vue-awesome-swiper对应不同的swiper,所以swiper里面的属性多数能应用到vue-awesome-swiper中,也可以根据swiper文档来设置vue-awesome-swiper属性;
swiper挂网:https://www.swiper.com.cn/,本次使用的版本"vue-awesome-swiper": "^3.1.3"

二、安装

npm install vue-awesome-swiper@3.1.3 --save//指定安装版本
npm install vue-awesome-swiper --save // 默认安装最新的

三、引入

引入有两种方式

1.在main.js文件中全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

2.在组件中引入

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

四、轮播图

<template>
	<div>
		<section class="swiper">
			<swiper :options="swiperOption">
				<swiper-slide  class="swp-silde" v-for="(item, index) in swiperList" :key="index" data-id="item.id">
				<img class="swp-img" :src="item.imgUrl" alt="">swiper-slide>
				<div class="swiper-pagination" slot="pagination">div>
			swiper>
		section>
	div>
template>	

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
   name: "Swiper",
   components: {
     swiper,
     swiperSlide,
   },
   data(){
      return {
          swiperOption: {
            pagination: { el: '.swiper-pagination' },
            autoplay: {},
          },
          swiperList: [{
            "id": "0001",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1708/7c/c0b9acba07764302.jpg_750x200_389436b7.jpg"
          }, {
            "id": "0002",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1805/13/6332699c44387902.jpg_750x200_b7afa4f8.jpg"
          }, {
            "id": "0003",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1805/3b/ef86879aa50e3002.jpg_750x200_2a108508.jpg"
          }, {
            "id": "0004",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1806/c1/a8a7d6b08a69c002.jpg_750x200_59bdc9ae.jpg"
          }, {
            "id": "0005",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1806/5a/a7fc8e091190d602.jpg_750x200_e3aae50d.jpg"
          }],
      }
   }
},
created(){
   //只有一张图片时不轮播
   this.swiperOption.autoplay = this.swiperList.length != 1 ? {
   		disableOnInteraction: false, // 用户操作swiper之后,是否禁止autoplay
   		delay: 3000, // 自动切换的时间间隔(单位ms)
   } : false
},
script>

你可能感兴趣的:(vue)