vue-awesome-swiper
1.下载插件
npm install vue-awesome-swiper --save
2.应用main.js
import VAS from 'vue-awesome-swiper'
import 'vue-awesome-swiper.min.css'
3.遇到的坑
! css和代码分离,要引入 ‘vue-awesome-swiper.min.css’
! 配置时 autoplay:3000打死出不来,改成了autoplay:true
!分页器和前进后退按钮无效
4.具体代码
<template><div id="home"><swiper :options="swiperOption" ref="mySwiper"><!-- slides --><swiper-slide><img src="../assets/image/ban1.jpg" alt="" ></swiper-slide><swiper-slide><img src="../assets/image/ban2.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/image/ban3.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/image/ban4.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/image/ban5.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/image/ban6.jpg" alt=""></swiper-slide><!-- Optional controls --><div class="swiper-pagination" slot="pagination"></div><div class="swiper-button-prev" slot="button-prev"></div><div class="swiper-button-next" slot="button-next"></div><div class="swiper-scrollbar" slot="scrollbar"></div></swiper></div>
</template>
//新版本配置
<script>import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {name: 'Home',data(){return {swiperOption: {//配置轮播,可以去swiper官网看api,链接http://www.swiper.com.cn/api/notNextTick: true, // notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是trueautoplay: true, //autoplay:{disableOnInteraction},//用户操作后继续动画loop: true,direction: 'horizontal', //水平滑动 ‘vertival’ 垂直方向grabCursor: true,setWrapperSize: true,autoHeight: true,pagination: {el: '.swiper-pagination'},centeredSlides: true,paginationClickable: true,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev'},keyboard: true,mousewheelControl: true,observeParents: true, // 如果自行设计了插件,那么插件的一些配置相关参数,也应该出现在这个对象中,如下debuggerdebugger: true}}},components:{swiper,swiperSlide},computed:{swiper(){ //实例化swiperreturn this.$refs.mySwiper.swiper}}}
</script>
//低版本配置<script>
data() {
return
{
swiperOption:
notNextTick:
true
,
// swiper configs 所有的配置同swiper官方api配置
autoplay: 3000,
direction:
'vertical'
,
grabCursor:
true
,
setWrapperSize:
true
,
autoHeight:
true
,
pagination:
'.swiper-pagination'
,
paginationClickable:
true
,
prevButton:
'.swiper-button-prev'
,
//上一张
nextButton:
'.swiper-button-next'
,
//下一张
scrollbar:
'.swiper-scrollbar'
,
//滚动条
mousewheelControl:
true
,
observeParents:
true
,
debugger:
true
,
}
}
},
<script>
<template><div id="home"><swiper :options="swiperOption" ref="mySwiper"> <!-- slides --> <swiper-slide><img src="../assets/image/ban1.jpg" alt="" ></swiper-slide><swiper-slide><img src="../assets/image/ban2.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/image/ban3.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/image/ban4.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/image/ban5.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/image/ban6.jpg" alt=""></swiper-slide> <!-- Optional controls --> <div class="swiper-pagination" slot="pagination"></div><div class="swiper-button-prev" slot="button-prev"></div><div class="swiper-button-next" slot="button-next"></div><div class="swiper-scrollbar" slot="scrollbar"></div></swiper></div> </template><script> import { swiper, swiperSlide } from 'vue-awesome-swiper' export default {name: 'Home', data(){return {swiperOption: {//以下配置不懂的,可以去swiper官网看api,链接http://www.swiper.com.cn/api/// notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,<br> 假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true // notNextTick: true, // // swiper configs 所有的配置同swiper官方api配置 // speed: 400, // autoplay: true, // loop:true, // direction: 'horizontal', // grabCursor: true, // setWrapperSize: true, // autoHeight: true, // pagination : '.swiper-pagination', // paginationClickable: true, // prevButton: '.swiper-button-prev',//上一张 // nextButton: '.swiper-button-next',//下一张 // scrollbar: '.swiper-scrollbar',//滚动条 // mousewheelControl: true, // observeParents: true, // // 如果自行设计了插件,那么插件的一些配置相关参数,也应该出现在这个对象中,如下debugger // debugger: true, notNextTick: true, // notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true autoplay: true, loop: true, direction: 'horizontal', grabCursor: true, setWrapperSize: true, autoHeight: true, pagination: {el: '.swiper-pagination' }, centeredSlides: true, paginationClickable: true, navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev' }, keyboard: true, mousewheelControl: true, observeParents: true, // 如果自行设计了插件,那么插件的一些配置相关参数,也应该出现在这个对象中,如下debugger debugger: true } } }, components:{swiper,swiperSlide }, computed:{swiper(){return this.$refs.mySwiper.swiper} } } </script><!--<style> @import '../swiper.min.css'; </style>-->
转载于:https://www.cnblogs.com/wdxue/p/8854467.html
vue-awesome-swiper相关推荐
- html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来 下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
- Vue使用Swiper看这一篇就够了
Vue使用Swiper看这一篇就够了 此案例实现需求 完成swiper动态异步数据下的slide渲染 自定义分页器样式 解决loop:true设置时的事件丢失问题 swiper鼠标移入/移出 暂停/开 ...
- vue 使用swiper详细步骤
首先请参考下边这个连接,安装正确的swiper 特别说明一定是vue3,vue2使用是会报错的 vue3 中使用 swiper_@swiper_jjw_zyfx的博客-CSDN博客 其次: <t ...
- vue 结合swiper插件实现广告公告上下滚动的效果
最近做到的项目里面需要广告公告上下滚动,网上也找了很多例子,效果总是不理想,所以就想着利用轮播图的竖直方向的滚动来实现这个效果 一.在项目里面安装swiper插件 通过npm安装: npm insta ...
- vue中swiper仿去哪儿网相册
效果图 下载Swiper 版本:" vue-awesome-swiper " : " ^3.1.3 ",用的是 Swiper4.x 配置选项 npm i ...
- vue中swiper使用
参考链接 1.npm官网搜索vue-awesome-swiper cnpm install swiper@5 vue-awesome-swiper --save 2.找到Global Registra ...
- vue使用swiper插件
昨天搞这个插件,搞得我很生气! 我只是要个最简单的移动端轮播图,整的我心态本类 能够自动播放,循环就行.. 但是找了一圈,一直报错 还有就是,我获取图片是通过接口的,所以用到了v-for循环 就会出现 ...
- Vue实现swiper轮播
https://www.npmjs.com/package/vue-awesome-swiper 以上是npm安装swiper插件的网址 找 NPM 下的 npm install vue-awesom ...
- vue实现swiper两端小中间大的效果 圆形
首先引入swiper,引入方法参考 https://blog.csdn.net/u013361179/article/details/123070947?spm=1001.2014.3001.5501 ...
- vue中 swiper自定义分页器
不清楚有没有更好更简洁的方式,但我这里只采用 最质朴,绝对能成功的 1,预先定义可获取的swiper实例化 data (){ return {swiper:{}} } 实例化swiper时候,需要以t ...
最新文章
- MATLAB基础操作--命令窗口
- hdu4506小明系列故事——师兄帮帮忙 (用二进制,大数高速取余)
- ecshop php5.4以上版本错误之preg_replace 替换成 preg_replace_callback
- store内部数据调用 与 view使用store数据
- 各种震撼的慢镜头,奇怪的知识又增加了!​
- Java常用类(2)--日期时间相关类Date、Calendar、LocalDateTime、Instant全面
- S5PV210裸机之重定位
- discuz仿文明争霸游戏官网模版
- 图像超分工具,在线工具
- 【ACL2020】使用问题图生成解决multi-hop复杂KBQA
- 【转】其他人的BUG
- 【面试招聘】我的秋招记录——(自然语言处理-面经+感悟)
- 苹果科学计算机使用方法,iPhone的计算器五大使用技巧
- CCS编译错误:error #10099-D和error#10234-D unresolved symbols remain解决方法
- IDF实验室之牛刀小试
- 往事如烟 - 父亲母亲的居木子豆腐
- 影视剪辑,自学剪辑的转场与准则,掌握一门剪辑技能
- 拯救者15isk加装固态硬盘
- 当我们谈论Unidbg时我们在谈什么
- 手机WAN远程唤醒主机
热门文章
- PYTHON2.day03
- zabbix安装配置详解(一)
- cephfs linux kernel client针对superblock操作流程的分析
- 在C#代码中应用Log4Net(一)简单使用Log4Net
- iebook 发布到网站 独家秘诀
- SQL2008-分页显示3种方法
- [项目实施失败讨论Case] “凭心而论,在这家公司很敬业的工作了3年多,老板最后给我下的评语,大家都看看吧,千万别和我走同一条路!”(摘自csdn)...
- CCNP-19 IS-IS试验2(BSCI)
- 工业互联网 — 5G 与 IIoT
- 红帽虚拟化RHEV-PXE批量安装RHEV-H