当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue里swiper的一些坑

vue里swiper的一些坑

2018年08月30日  | 移动技术网IT编程  | 我要评论

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

 

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

 

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

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

 

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

<html代码>

<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>

<js>

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

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

css就不多说了,控制大小应该都会.

 

 

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

 

正确:

第一步: 安装  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常用的目前踩到的坑就在这里,后续有会持续更新哟

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网