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. 查看Dubbo服务-通过zk客户端

    一.基本概念 https://www.cnblogs.com/huasky/p/8268568.html 二.下载与安装 1.进入要下载的版本的目录,选择.tar.gz文件下载 下载链接:http:/ ...

  2. arm链接脚本

    一. 为什么需要链接脚本 1.1. 从源码到可执行程序(主要有三个步骤:预编译.编译.链接) 1.1.1. 预编译 a. 预编译器执行.譬如C中的宏定义就是由预编译器处理,注释等也是由预编译器处理的. ...

  3. [多校联考2019(Round 5 T3)]青青草原的表彰大会(dp+组合数学)

    [多校联考2019(Round 5)]青青草原的表彰大会(dp+组合数学) 题面 青青草原上有n 只羊,他们聚集在包包大人的家里,举办一年一度的表彰大会,在这次的表彰大会中,包包大人让羊们按自己的贡献 ...

  4. Java的同名属性、同名普通函数、同名静态函数,是否被覆盖

    作者按:虚拟函数的概念早就滚瓜烂熟了.但是今天面试发现:1.同名属性,2.同名普通函数,3.同名静态函数,是否被覆盖的问题.请看下面三个例子: 例子1:测试父类的属性是否存在和被完全覆盖class A ...

  5. ls, dir, vdir - 列目录内容

    ls [选项] [文件名...] POSIX 标准选项: [-CFRacdilqrtu1] GNU 选项 (短格式): [-1abcdfgiklmnopqrstuxABCDFGLNQRSUX] [-w ...

  6. linux c下的c文件 h文件 o文件 so文件 a文件 可执行文件 gcc使用

    linux下c语言工程: c文件:主要每个模块的原代码都在c文件中. h文件:每个c文件都跟着一个h文件,h文件的作用是放着c文件中函数的声明,结构体的定义,宏的定义等. o文件:目标文件.每个文件经 ...

  7. 003-awk 命令使用

    awk 命令使用 截取符合条件的列 awk 先读取第一行后,再去处理数据 例子: cut 不能截取分隔符为空格,tab之类的文件或字符串,但awk可以 [root@zabbix lianxi]# df ...

  8. 机器学习分类算法之K近邻(K-Nearest Neighbor)

    一.概念 KNN主要用来解决分类问题,是监督分类算法,它通过判断最近K个点的类别来决定自身类别,所以K值对结果影响很大,虽然它实现比较简单,但在目标数据集比例分配不平衡时,会造成结果的不准确.而且KN ...

  9. 2019长安大学ACM校赛网络同步赛 M LCM (数论)

    链接:https://ac.nowcoder.com/acm/contest/897/M来源:牛客网 LCM 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65 ...

  10. 错误:非法字符:“\ufeff”

        导入开源的项目的时候,你可以碰到以上的编码问题,这一般这个项目是用eclipse开发的.主要原因是: Eclipse可以自动把UTF-8+BOM文件转为普通的UTF-8文件,但Android ...