分享vue里swiper的一些坑


Posted in Javascript onAugust 30, 2018

实例: 错误(无法显示出分页器按钮,此功能不适用与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常用的目前踩到的坑就在这里,后续有会持续更新哟

补充一下: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的一些坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Node.js编码规范
Jul 14 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
js中unicode转码方法详解
Oct 09 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
jquery.validate使用详解
Jun 02 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
js里面的变量范围分享
Jul 18 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
用javascript制作qq注册动态页面
Apr 14 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 #Javascript
小程序图片长按识别功能的实现方法
Aug 30 #Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 #Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 #Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 #Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 #Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 #Javascript
You might like
基于PHPExcel的常用方法总结
2013/06/13 PHP
php mysql 封装类实例代码
2016/09/18 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Python多继承顺序实例分析
2018/05/26 Python
python高阶爬虫实战分析
2018/07/29 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
Python排序函数的使用方法详解
2020/12/11 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
自我鉴定范文300字
2013/10/01 职场文书
小学生元旦广播稿
2014/02/21 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
三年级学生期末评语
2014/12/26 职场文书
2015年外联部工作总结
2015/04/03 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL