vue添加swiper的正确方式亲测---切图网
在vue项目中,我们在做图片轮播的方式和传统切图不同,传统切图中我们一般采用非常强大的swiper来完成,而在vue中一般依赖vue-awesome-swiper组件来完成(vue-awesome-swiper其实就是基于swiper4封装的vue插件,所以如果你刚好熟悉swiper.js插件的话,基本你都能看明白)。亲测有用,按照下面方法执行即可成功,方法如下:
1,安装组件通过命令行
npm install swiper
2,在main.js添加
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
3,在当前页添加
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
4,在当前页data里面添加
swiperOption: {
pagination: {
el: '.swiper-pagination',
clickable :true
},
paginationClickable: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: false,
coverflow: {
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows : true
}
},
5,当前页添加
<swiper class="h-view" :options="swiperOption">
<swiper-slide v-for="(item,index) in bigPic" v-if="index<4 ">
<router-link :to="{path:'/Knowledge_detail', query:{contentId: item.contentId}}">
<div class="img">
<img :src="item.bigImgUrl ? item.bigImgUrl : 'imgs/img01.jpg'"/>
</div>
</router-link>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
vue添加swiper的正确方式亲测---切图网的更多相关文章
- 在vue中继续使用layer.js来做弹出层---切图网
layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导 ...
- vue基于video.js实现视频播放暂停---切图网
切图网是最早致力于PSD2HTML切图等web前端外包服务的,随着前端技术的更新迭代,现在也已经全面投入了vue的浪潮了,下面是vue中实现视频播放的方法. vue.js中引入video视频播放器 m ...
- vue自定义分页组件---切图网
vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用.目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重 ...
- RecyclerView添加Header的正确方式
原文链接:http://blog.csdn.net/qibin0506/article/details/49716795 看了一下博客目录,已经有好几篇博客是关于RecyclerView的,不过对于这 ...
- vue封装组件的正确方式-封装类似elementui的组件
最近读了下element的源码,仿照他封装了两种不同的组件. 第一种:通过组件来调用显示的 <template> <!--src/component/custom/main.vue- ...
- Cookie对象工具包,对象添加,获取,修改-亲测可用
先来了解下Cookie 和 Session对象的概念吧. 首先,Cookie是客户端缓存技术,大小一般为4kb左右,主要存储一些比较小的信息,常用的例子有用户名和密码,且是不安全的: Session是 ...
- vue加百度统计代码(亲测有效)
申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到一个问 ...
- pip和conda添加国内清华镜像源(亲测有效)
文章目录 pip和conda 添加国内清华镜像 1. pip源更改: 2. conda源更改: pip和conda 添加国内清华镜像 python模块安装,使用国内源可以提高下载速度. 1. pip源 ...
- github for windows 安装失败解决方案(亲测)
早之前就有接触github,也在公司机子上装过,一路下来挺顺畅的.夏老师还纳闷他的机子装不上,我说,有鬼! 然而时隔一个月自己再来装,却在自己的本本上遇到鬼了. 然而网上论坛收了一堆,各种试.果断放弃 ...
随机推荐
- VS2013下OpenCV2.48配置
VS2013+OpenCV2.48配置 一.下载OpenCV OpenCV下载地址http://opencv.org/ SDK下载链接在页面右侧 根据平台选择相应的SDK下载.在Windows开发下开 ...
- excel 2010 如何设置日期选择器
excel 中想输入很多的日期.如果每个日期都直接手动输入太过于繁琐,而且容易出错.想制作一个日期选择器,直接鼠标点选就可以了. 效果如下: 具体实现参考 http://wenku.baidu.com ...
- 关于使用详解ASP.NET State Service
ASP.NET State Service服务如果启动可以解决这个问题,它会生成一个aspnet_state.exe进程,这个就是Session信息的进程.只要这个进程在,就算是重启了IIS,站点的S ...
- 计蒜客A1998 Ka Chang (分块+dfs序+树状数组)
题意 给你一个\(1e5\)的有点权的树,有\(1e5\)个操作: 1.给第\(x\)层的点加上\(y\) 2.求以\(x\)为根的子树的点权和 思路 首先处理出层数为x的所有点 操作2一般都是用df ...
- Nginx 部署及配置
Tengine + Luajit2 系统账号及环境配置 $ sudo useradd -g 100 -u 200 user_00 $ sudo groupadd -g 300 www $ sudo u ...
- C++解析Json,使用JsonCpp读写Json数据
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.通常用于数据交换或存储. JsonCpp是一个基于C++语言的开源库,用于C++程序的J ...
- 关于ELF文件和BIN文件
ELF文件执行过程 ELF文件有操作系统的加载器loader执行,比如linux,windows,对于3803处理器是grmon的load命令. 加载器会读取ELF文件program header,比 ...
- window下建立vue.js项目
安装node.js 直接下载安装文件安装就可以了 vue项目搭建 .到自己要件项目的文件夹运行cmd命令 .如果没有安装vue-cli .npm install -g vue-cli .vue ini ...
- webpack构建vue单文件组件
1.安装vue-loader和vue-template-compiler npm i vue-loader vue-template-compiler --save-dev 2.配置webpack.c ...
- 利用url地址获取你需要的参数,window.location系列
这是我要获取url中一个code的参数值所以用了如下的方法GetQueryString(name) { let reg = new RegExp('(^|&)' + name + '=([^& ...