vue-awesome-swiper组件的使用
一、轮播图组件是这样安装的
npm i --save-dev vue-awesome-swiper
main.js里面
import 'swiper/dist/css/swiper.css' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper)
banner.vue.
切记要在需要引入的页面中
import { swiper, swiperSlide } from 'vue-awesome-swiper'
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<swiper :options="swiperOption" ref="mySwiper">
<!-- 幻灯内容 -->
<swiper-slide :key="i" v-for="(str, i) in bannerList">
<img :src="str.picUrl" style="height:100%"/>
</swiper-slide>
<!-- 以下控件元素均为可选 -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
</template> <script type="text/ecmascript-6"> import { swiper, swiperSlide } from 'vue-awesome-swiper' export default {
props: ['bannerList'],
data () {
return {
data: {},
swiperOption: {
// 所有配置均为可选(同Swiper配置)
initialSlide: ,
pagination:'.swiper-pagination',
// pagination: {
// el: '.swiper-pagination'
// },
loop: true,
speed: ,
direction: 'horizontal',
paginationClickable: true,
mousewheelControl: true,
autoplay: ,
//autoplay: true,
autoplayDisableOnInteraction: false,
observer: true,
observeParents: true,
debugger: true,
onTransitionStart (swiper) {
console.log(swiper)
}
}
}
},
mounted () {
// 这边就可以使用swiper这个对象去使用swiper官网中的那些方法
this.swiper.slideTo(, , false)
},
computed: {
swiper () {
return this.$refs.mySwiper.swiper
}
},
components: {
swiper,
swiperSlide
}
}
</script>
Vue项目中用到轮播,swiper有专门针对Vue开发的版本。
通过npm安装后,引入文件。
然后写组件,写入后发现,script里面的autoplay参数不起作用了。网上找了都是autoplay:3000(时间自己定)。
有人的电脑上就可以,我的就不可以?
最终用了autoplay:true,轮播自动走了。
vue-awesome-swiper组件的使用的更多相关文章
- Vue中怎样使用swiper组件?
我用的VS Code编译器,首先打开终端,进入项目(我是在13-vue文件夹下面的elem中使用) D:\study\web\13-vue\elem> cnpm install vue-awes ...
- 在vue中使用swiper组件
第一步:在终端的项目根目录下载安装swiper: cnpm/npm install vue-awesome-swiper --save; 第二步:在程序入口文件main.js中引用: import V ...
- vue轮播组件及去掉路由#
最近公司要我去实现vue知识的系统讲解,总结一番,大致需要7节课,今天大致说一下我们使用vue需要学会的基本技能.vue是一个渐进性视图渲染框架,使用vue核心是数据出发,数据一般是我们前台从后台获取 ...
- vue awaresome swiper的使用
main.jsimport VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'Vue.use(V ...
- 5.【nuxt起步】-swiper组件
接下来是一个比较常用,也比较重要的组件 swiper,可以自行搜索 vue swiper,有很多开源组件,我这里就复用之前一个熟悉的, 1.新建component/banner.vue 刷新报错: 要 ...
- vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...
- Vue 给子组件传递参数
Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...
- Vue.js说说组件
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
- 基于Vue封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...
随机推荐
- springCloud学习- 路由网关(zuul)
1.zuul简介 1.1.zuul是什么 zuul 是netflix开源的一个API Gateway 服务器, 本质上是一个web servlet应用. Zuul 在云平台上提供动态路由,监控,弹性, ...
- P1464 Function 洛谷
https://www.luogu.org/problem/show?pid=1464 题目描述 对于一个递归函数w(a,b,c) 如果a<=0 or b<=0 or c<=0就返回 ...
- N天学习一个linux命令之diff
用途 按行比较文件差异,也可以比较目录 用法 diff [OPTION]... FILES 常用选项 -i --ignore-case 忽略大小写 --ignore-file-name-case 忽略 ...
- Bitnami LNMP集成包安装简单总结
前言发送图文消息时间点,访问量大,请求并发多,业务web机处理不过来,新增加了2台web机应对.搞过Linux软件安装的都知道,各种库的依赖会把人搞崩溃,尤其是服务器不能访问外网的情况下,会非常的蛋疼 ...
- Swift和Objective-C混合编程——Swift调用OC
在iOS应用的开发中.Swift必将代替OC,两者的趋势是"短期共存,长期代替".但曾经有太多的代码是用OC语言完毕的,而Swift的开发也从 OC中继承了非常多的特性.两者也是有 ...
- BZOJ 1605 [Usaco2008 Open]Crisis on the Farm 牧场危机 DP
题意:链接 方法: DP 解析: 第一眼搜索题,复杂度不同意dfs,并且牛的数量太多不能bfs,迭代更不可能,A*不会估价.可能记忆化? 等等记忆化我还搜个毛线- 直接改成DP就好了. 状态非常好想非 ...
- [Cocos2d-x v3.x]Mac OX 创建新的Cocos2d-x 3.0 项目
文章内容来自于: http://cocos2d-x.org/wiki/How_to_Start_A_New_Cocos2D-X_Game Mac OS X 10.9 Software Requirem ...
- Jmeter压测问题_Non HTTP response code: org.apache.http.conn.ConnectTimeoutException
负载机压测,线程500,服务器根本无压力,负载机本身发的请求都是失败的 Sample result如下: Thread Name: 考勤(考勤提交) 1-134 Sample Start: 2018- ...
- 关于strace的一点东西
好久没写博客了,感觉有点羞愧,认为自己也应该静下心来利用自己可分配的时间去提升自己. 尽管近期在看一些Python的东西,但是认为自己还是不能忘记本行啊,Linux C的一些东西必须一直 ...
- 学习笔记——SQL SERVER的递归
SQL SERVER似乎天然具有支持递归的属性. 1.比如说,有几次,我编写或修改存储过程的时候,为图方便,在末尾随手写上 执行这个存储过程 的语句,比如 [sql] view plaincopy A ...