分享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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
javascript几个易错点记录
Nov 26 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
ES6中定义类和对象的方法示例
Jul 31 Javascript
js实现列表按字母排序
Aug 11 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
js日期、星座的级联显示代码
2014/01/23 Javascript
js实现简单计算器
2015/11/22 Javascript
详解JS面向对象编程
2016/01/24 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
Django与JS交互的示例代码
2017/08/23 Python
Python语言的变量认识及操作方法
2018/02/11 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
使用Python实现牛顿法求极值
2020/02/10 Python
Python中的面向接口编程示例详解
2021/01/17 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
什么是makefile? 如何编写makefile?
2013/01/02 面试题
中学生自我鉴定
2014/02/04 职场文书
小学毕业寄语大全
2014/04/03 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
监考失职检讨书
2015/01/26 职场文书
小升初自荐信范文
2015/03/05 职场文书
个人更名证明
2015/06/23 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python