swiper(轮播)组件
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(轮播)组件的更多相关文章
- 【Vue中的swiper轮播组件】
<template> <swiper :options="swiperOption" ref="mySwiper"> <!-- s ...
- 微信小程序_(组件)swiper轮播图
微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...
- 基于移动端Reactive Native轮播组件的应用与开发详解
总结下这段时间学习reactive native的一些东西,我们来认识一下,被炒得这么火的rn,究竟是个什么东西,以及如何去搭建自己的demo. reactive native是什么 由facebo ...
- 移动端Reactive Native轮播组件
移动端Reactive Native轮播组件 总结下这段时间学习reactive native的一些东西,我们来认识一下,被炒得这么火的rn,究竟是个什么东西,以及如何去搭建自己的demo. reac ...
- 使用Swiper轮播插件引起的探索
提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...
- vue中引用swiper轮播插件
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...
- React-Native之轮播组件looped-carousel的介绍与使用
React-Native之轮播组件looped-carousel的介绍与使用 一,关于react-native轮播组件的介绍与对比 1,react-native-swiper在动态使用网页图片,多张图 ...
- vue中引入awesomeswiper的方法以及编写轮播组件
1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3 ...
- vue-awesome-swipe 基于vue使用的轮播组件 使用(改)
npm install vue-awesome-swiper --save //基于vue使用的轮播组件 <template> <swiper :options="swi ...
- Swiper轮播插件使用
前文 Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端,能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. 归根到此,Swi ...
随机推荐
- Linux下安装tomcat与配置
准备工作:将下载好的tomcat 9.0上传到自己的阿里云服务器(推荐根目录下) 附下载地址:https://archive.apache.org/dist/tomcat/tomcat-9/v9.0. ...
- 洛谷 P5662 纪念品 & [NOIP2019普及组] (dp,完全背包)
传送门 解题思路 本题首先要明白,在每一天时,最优策略是先进行操作2(卖),再进行操作1(买),才能是利益最大化. 本题很显然当只有两天时,是一个完全背包,就是把当日价钱当做体积,把明日价格和今日价格 ...
- 在SQL中存储过程的一般语法
一般分为十种情况,每种语法各不相同: 1. 创建语法 1 2 3 4 5 6 7 create proc | procedure pro_name [{@参数数据类型} [=默认值] [outp ...
- 表单提交 multipart/form-data 和 x-www-form-urlencoded的区别
表单提交表单有两种提交方式,POST和GET.通常我们会使用POST方式,一是因为形式上的安全 :二是可以上传文件. 我之前经常忽略掉表单的编码类型,觉得它特别长比较难记,而且不设置也似乎不影响什么. ...
- Python性能分析工具Profile
Python性能分析工具Profile 代码优化的前提是需要了解性能瓶颈在什么地方,程序运行的主要时间是消耗在哪里,对于比较复杂的代码可以借助一些工具来定位,python 内置了丰富的性能分析工具,如 ...
- Django中常用字段
一.Django框架的常用字段 Django ORM 常用字段和参数 常用字段 常用字段 AutoField int自增列,必须填入参数 primary_key=True.当model中如果没有自增列 ...
- man.conf - man的设定资料
描述 man(1) man(1) 会 读 取 本 档 . man.conf 的 内 容 包 含 了 (a) 如 何 建 立 man 搜 寻 路 径 的 资 讯 , (b) man 所 使 用 的 程 ...
- 375-基于TI DSP TMS320C6657、XC7K325T的高速数据处理核心板
基于TI DSP TMS320C6657.XC7K325T的高速数据处理核心板 一.板卡概述 该DSP+FPGA高速信号采集处理板由我公司自主研发,包含一片TI DSP TMS320C6657和 ...
- 六、ARM 寻址方式
寻址方式是针对源操作数来说的 6.1 立即数寻址 源操作数是立即数 立即数:操作码以 # 号开头的数字为立即数 立即数寻址: MOV R0, #0x300 伪指令: LDR R0 ...
- u-boot-2016.09 make编译过程分析(二)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/guyongqiangx/article/ ...