swiper是一个非常强大的组件

  但是需要swiper-item这个标签来实现他想显示的内容

  swiper-item标签有个item-id的属性,属性值:字符串  是swiper-item的标识符;

  一个swiper标签只能显示一个swiper子元素的内容,所以说一个swiper-item就相当于一个板块,我们想进行四个图片的轮播的话,就是四个板块;

  swiper的属性:

    indicator-dots:属性值:布尔  是否显示面板指示点;

    indicator-color:属性值:字符串  显示指示点的颜色;

    indicator-active-color:属性值:字符串  显示当前滑块 指示点的颜色;

    autoplay:属性值:布尔  是否自动切换;

    current:属性值:数字  滑块的下标  / 指定哪个滑块

    interval:属性值:数字,(他的单位是毫秒)自动切换的时间间隔

    duration:属性值:数字,滑动的生命周期;

    circular:属性值:布尔,是否衔接滑块

    vertical:属性值:布尔,滑动方向是否为纵向;

    pervious-margin:属性值:数字 例:"10rpx",上一个滑块的一小部分

    next-margin:属性值:数字,显示下一个滑块的一小部分

    display-multiple-items:属性值:数字,同时显示几个滑块;

    skip-hidden-item-layout:属性值:布尔,是否跳过未显示的滑块布局,复杂情况下可以提升性能,但是会丢失影藏状态的布局信息;

    easing-function:指定swiper切换缓动的动画类型

      属性值:default:默认缓动函数;

          linear:线性动画

          easeInCubic:缓入动画;

          easeOutCubic:缓出动画;

          easeInOutCubic:缓入缓出动画

  事件:

    bindchange:current改变时会触发bingchange事件

    bindtransition:swiper-item的位置发生改变时,会触发bindtransition事件

    bindanimationfinish:动画结束时会触发bindanimationfinish事件;

  

swiper(轮播)组件的更多相关文章

  1. 【Vue中的swiper轮播组件】

    <template> <swiper :options="swiperOption" ref="mySwiper"> <!-- s ...

  2. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

  3. 基于移动端Reactive Native轮播组件的应用与开发详解

    总结下这段时间学习reactive native的一些东西,我们来认识一下,被炒得这么火的rn,究竟是个什么东西,以及如何去搭建自己的demo. reactive  native是什么 由facebo ...

  4. 移动端Reactive Native轮播组件

    移动端Reactive Native轮播组件 总结下这段时间学习reactive native的一些东西,我们来认识一下,被炒得这么火的rn,究竟是个什么东西,以及如何去搭建自己的demo. reac ...

  5. 使用Swiper轮播插件引起的探索

    提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...

  6. vue中引用swiper轮播插件

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...

  7. React-Native之轮播组件looped-carousel的介绍与使用

    React-Native之轮播组件looped-carousel的介绍与使用 一,关于react-native轮播组件的介绍与对比 1,react-native-swiper在动态使用网页图片,多张图 ...

  8. vue中引入awesomeswiper的方法以及编写轮播组件

    1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3 ...

  9. vue-awesome-swipe 基于vue使用的轮播组件 使用(改)

    npm install vue-awesome-swiper --save  //基于vue使用的轮播组件 <template> <swiper :options="swi ...

  10. Swiper轮播插件使用

    前文 Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端,能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.                 归根到此,Swi ...

随机推荐

  1. 剑指Offer编程题(Java实现)——两个链表的第一个公共结点

    题目描述: 输入两个链表,找出它们的第一个公共结点. 思路一: 设 A 的长度为 a + c,B 的长度为 b + c,其中 c 为尾部公共部分长度,可知 a + c + b = b + c + a. ...

  2. 2019 Multi-University Training Contest 2 - 1011 - Keen On Everything But Triangle - 线段树

    http://acm.hdu.edu.cn/showproblem.php?pid=6601 首先要贪心地想,题目要最长的边长,那么要怎么构造呢?在一段连续的区间里面,一定是拿出最长的三根出来比,这样 ...

  3. 2019 上海市大学生网络安全大赛 RE部分WP

    这次比赛就做了这一道逆向题,看到队友的WP,下面的对v10的加密方式为RC4,从我提取的v4数组就能够察觉出这是CR4了,自己傻乎乎的用OD调试,跟踪数据半天才做出来,还是见得的少了... ...下面 ...

  4. 使用Cookie记住登录用户

    在登录表单中,写入: 记住我: <select name="cookie">       <option value="0" selected ...

  5. 流畅的Python (Fluent Python) —— 前言

    本书重点: 这本书并不是一本完备的 Python 使用手册,而是会强调 Python 作为编程语言独有的特性,这些特性或者是只有 Python 才具备的,或者是在其他大众语言里很少见的. Python ...

  6. keepalived容灾方案,实现nginx负载均衡主从架构(1)

    一:环境准备:4台nginx服务器,两台用yum安装,两台使用源码安装 第一步:使用yum安装nginx服务器,在浏览器输入ip,可以显示以下内容,这步比较简单,安装好修改/usr/share/ngi ...

  7. 数据仓库Hive(一)——hive简介,产生,安装

    1.Hive简介 数据仓库 解释器.编译器.优化器等 运行时,元数据存储在关系型数据库里面 1.1数据库和数据仓库的区别 数据库需要立即返回结果,数据仓库不需要 数据仓库能收纳各种数据源,而数据库只能 ...

  8. codeforces 57 C Array(简单排列组合)

    C. Array time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  9. 前端错误监控上报公共方法,可在父页面及iframe子页面同时使用

    先创建公共文件error-reported.js 内容如下: /** * 获取前端错误信息进行上报 * @param iframe */ function catchError (iframe) { ...

  10. Ubuntu Text editor文本编辑器相关设置

    刚开始不熟悉Ubuntu,设置个文本编辑界面都难找到: 打开后在顶上的导航栏,下拉框内有preferences: 里面可以设置视图.字体颜色等