分享vue里swiper的一些坑
2018-09-27 09:18
实例: 错误(无法显示出分页器按钮,此功能不适用与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=当然,你也可以根据上面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 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的一些坑，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！