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 ...
随机推荐
- 剑指Offer编程题(Java实现)——两个链表的第一个公共结点
题目描述: 输入两个链表,找出它们的第一个公共结点. 思路一: 设 A 的长度为 a + c,B 的长度为 b + c,其中 c 为尾部公共部分长度,可知 a + c + b = b + c + a. ...
- 2019 Multi-University Training Contest 2 - 1011 - Keen On Everything But Triangle - 线段树
http://acm.hdu.edu.cn/showproblem.php?pid=6601 首先要贪心地想,题目要最长的边长,那么要怎么构造呢?在一段连续的区间里面,一定是拿出最长的三根出来比,这样 ...
- 2019 上海市大学生网络安全大赛 RE部分WP
这次比赛就做了这一道逆向题,看到队友的WP,下面的对v10的加密方式为RC4,从我提取的v4数组就能够察觉出这是CR4了,自己傻乎乎的用OD调试,跟踪数据半天才做出来,还是见得的少了... ...下面 ...
- 使用Cookie记住登录用户
在登录表单中,写入: 记住我: <select name="cookie"> <option value="0" selected ...
- 流畅的Python (Fluent Python) —— 前言
本书重点: 这本书并不是一本完备的 Python 使用手册,而是会强调 Python 作为编程语言独有的特性,这些特性或者是只有 Python 才具备的,或者是在其他大众语言里很少见的. Python ...
- keepalived容灾方案,实现nginx负载均衡主从架构(1)
一:环境准备:4台nginx服务器,两台用yum安装,两台使用源码安装 第一步:使用yum安装nginx服务器,在浏览器输入ip,可以显示以下内容,这步比较简单,安装好修改/usr/share/ngi ...
- 数据仓库Hive(一)——hive简介,产生,安装
1.Hive简介 数据仓库 解释器.编译器.优化器等 运行时,元数据存储在关系型数据库里面 1.1数据库和数据仓库的区别 数据库需要立即返回结果,数据仓库不需要 数据仓库能收纳各种数据源,而数据库只能 ...
- codeforces 57 C Array(简单排列组合)
C. Array time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...
- 前端错误监控上报公共方法,可在父页面及iframe子页面同时使用
先创建公共文件error-reported.js 内容如下: /** * 获取前端错误信息进行上报 * @param iframe */ function catchError (iframe) { ...
- Ubuntu Text editor文本编辑器相关设置
刚开始不熟悉Ubuntu,设置个文本编辑界面都难找到: 打开后在顶上的导航栏,下拉框内有preferences: 里面可以设置视图.字体颜色等