黄聪：如何正确在Vue框架里使用Swiper

时间 2019-12-04

标签如何正确 vue 框架使用 swiper 繁體版

原文原文链接

实例: 错误(没法显示出分页器按钮,此功能不适用与for循环出来的图片,只有当该页面图片固定几张时能正经常使用)javascript

第一步: 安装 npm i swiper (vue插件自带)css

第二步: 在当前页面里引入html

import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css';

第三步:固然呐,或许你在想内容呐,别急,为了你们的方便内容的写法我也会提供vue

<html代码>java

<div class="swiper-container">
　　<div class="swiper-wrapper">
　　　　<div class="swiper-slide" v-for="item in swiperitem"><img :src="item.thumb"></div>(for循环)(tip: 能够把for循环换成正常展现图片,以下面展现方法,每张图对应的放进去,分页器是能够用的,for循环这样分页器是没法显示与切换的)
　　　　< !--<div class="swiper-slide"><img src="http://cdn.qcacg.com//img/Illustration/11_02.jpg"></div>-->(固然,你也能够根据上面for循环里有几条数据添加几个这个div,img路径无关紧要,有也不会展现,分页器是根据swiper-slide判断显示与切换轮播的)
　　</div>
　　<div class="swiper-pagination swiprRem"></div>(分页器)
</div>npm

<js>app

vue初始化请求里添加该方法ide

mounted () {
　　var that = this;
　　that.$nextTick(function(){
　　　　var mySwiper = new Swiper(".swiper-container",{
　　　　　　direction:"horizontal",/*横向滑动*/
　　　　　　loop:true,造成环路（即：能够从最后一张图跳转到第一张图
　　　　　　pagination:".swiper-pagination",/*分页器*/
　　　　　　autoplay:3000/*每隔3秒自动播放*/
　　　　});
　　})
},oop

css就很少说了,控制大小应该都会.this

接下来讲第二个正确且简单的方法

正确:

第一步: 安装 npm i vue-awesome-swiper --save( 这一个是否安装根据实际状况,若是安装上一个你用没效果也要安装这个 => npm i swiper )

第二步: 在main.js文件里引入

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

在当前页面引入

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

第三步;

<html>

<swiper :options= "swiperOption" >

　　<swiper-slide v- for = "items in allData.bannerphoto" key= "items" >

　　　　<img :src= "items" alt= "" >

　　</swiper-slide>

　　<div class= "swiper-pagination" slot= "pagination" ></div> (分页器)

</swiper>

在data里定义轮播图

 
  swiperOption: { 
 
  　　pagination:  
  '.swiper-pagination' 
  , 
 
  　　paginationClickable:  
  true 
  , 
 
  　　autoplay: 2500, 
 
  　　autoplayDisableOnInteraction:  
  false 
  , 
 
  　　loop:  
  false 
  , 
 
  　　coverflow: {(轮播图切换方式) 
 
  　　　　rotate: 30, 
 
  　　　　stretch: 10, 
 
  　　　　depth: 60, 
 
  　　　　modifier: 2, 
 
  　　　　slideShadows :  
  true 
 
  　　} 
 
  },

关于swiper在vue里的分享就到这里了,各位用的感受阔以的帮忙点个赞呗,毕竟写了这么多,嘿嘿.关于swiper经常使用的目前踩到的坑就在这里,后续有会持续更新哟