分享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 相关文章推荐
jQuery hover 延时器实现代码
Mar 12 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
使用jquery如何获取时间
Oct 13 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
validform表单验证的实现方法
Mar 08 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 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
PHP 数字左侧自动补0
2008/03/31 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
selenium+python实现自动登录脚本
2018/04/22 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
室内设计专业个人的自我评价
2013/10/19 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
家长建议怎么写
2014/05/15 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
门面房租房协议书
2014/12/01 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
小学庆六一主持词
2015/06/30 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
redis数据结构之压缩列表
2022/03/21 Redis