分享vue里swiper的一些坑

时间:2021-05-25

实例: 错误(无法显示出分页器按钮,此功能不适用与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     });  }) },

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

补充一下:swiper在vue中的用法

首先通过npm i vue-awesome-swiper --save 来在vue中下载插件

然后再main.js中引入

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

接着在需要用到的组件里结构中插入代码

<div class="banner"> <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> <div class="jc"></div> </div>

然后在data中定义轮播图

swiperOption: { pagination: '.swiper-pagination', paginationClickable: true, autoplay: 2500, autoplayDisableOnInteraction: false, loop: false, coverflow: {  rotate: 30,  stretch: 10,  depth: 60,  modifier: 2,  slideShadows : true  } },

此时的coverflow是轮播图切换的方式 更改属性可切换轮播模式

总结

以上所述是小编给大家介绍的vue里swiper的一些坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章