Vue框架里使用Swiper的方法示例
时间:2018-09-20
这篇文章主要介绍了Vue框架里使用Swiper的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
下载swiper
首先使用npm 或者cnpm下载swiper
cnpm install swiper
引入swiper
import Swiper from ‘swiper'; import ‘swiper/dist/css/swiper.min.css';
使用swiper
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="../../static/images/ad1.jpg" alt=""> </div> <div class="swiper-slide"> <img src="../../static/images/ad2.jpg" alt=""> </div> <div class="swiper-slide"> <img src="../../static/images/ad3.jpg" alt=""> </div> </div> </div>
mounted里面调用
mounted(){ var mySwiper = new Swiper('.swiper-container', { autoplay:true, loop:true }) },
注意
如果想要从后台请求图片放上去 new Swiper要写在网络请求成功的函数里面,否则不会出来数据。
slider组件的内容如下:
<template> <swiper :options="swiperOption" ref="mySwiper"> <!-- slides --> <swiper-slide v-for="(picitem,index) in items" :key="index"> <img :src="picitem.src" alt=""> </swiper-slide> </swiper> </template> <script type="text/ecmascript-6"> import {swiper, swiperSlider} from 'vue-awesome-swiper' export default { data() { return { swiperOption: { notNextTick: true, loop: true, autoplay: true, speed: 1000, direction: 'horizontal', grabCursor: true, setWrapperSize: true, autoHeight: true, pagination: '.swiper-pagination', paginationClickable: true, mousewheelControl: true, observeParents: true, debugger: true }, items: [ {src: 'http://localhost/static/images/1.jpg'}, {src: 'http://localhost/static/images/2.jpg'}, {src: 'http://localhost/static/images/3.jpg'}, {src: 'http://localhost/static/images/4.jpg'}, {src: 'http://localhost/static/images/5.jpg'} ], } }, components: { swiper, swiperSlider } } </script> <style lang="stylus" rel="sheetstylus"> </style>
解释一下:autoplay:true这样可以解决不自动轮播问题。如果想设置滚动的时间,用speed设置相应时间即可。direction可以设置轮播的方向。具体的参数可参考swiper的官网地址:http://www.swiper.com.cn/api/Effects/2015/0308/193.html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- PHP数据结构(六) ——数组的相乘、广义表
- 游戏领域区块链探索
- 小程序中布局突然乱掉了,到底是怎么个情况?
- 小程序wx.canIUse和wx.getSystemInfo踏的坑
- 你真的了解小程序的自定义编译功能嘛?
- 小程序不同页面之间的传值方式
- PHP数据结构(六) ——树与二叉树之概念及存储结构
- 小程序中实现一键复制长段文本内容
- PHP数据结构(七) ——串与实现KMP算法
- PHP数据结构(八) ——赫夫曼树实现字符串编解码(实践1)
- 小程序开发注意点儿,新手入门基础
- ajax跨域有没有踩过坑,IE低版本浏览器如何支持?
- 你可能不知道的 Django Rest Framework 的两个新特性
- PHP数据结构(八) ——赫夫曼树实现字符串编解码(实践2)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android右滑返回上一个界面的实现方法
- Android pull解析xml的实现方法
- Android实现QQ图片说说照片选择效果
- 一个简单的toolabar结合drawlayout使用方法
- 利用DrawerLayout和触摸事件分发实现抽屉侧滑效果
- Android App端与PHP Web端的简单数据交互实现示例
- Android开发实现读取assets目录下db文件的方法示例
- Android Textview实现颜色渐变滚动效果
- Android中fragment+viewpager实现布局
- android自动工具类TextUtils使用详解
- Android常用正则表达式验证工具类(实例代码)
- Android webview实现拍照的方法
- Android ListView自定义Adapter实现仿QQ界面
- Android webview旋转屏幕导致页面重新加载问题解决办法
- Android系统对话框使用详解(最详细)