微信小程序开发之视图容器swiper
视图容器swiper是微信小程序提供的内置图片轮播组件,用它可以实现广告横向、纵向切换播放,滑动导航条等各种效果。
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。
官网说明地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
经过测试发现,图片地址可以外部引用也可以写本地地址,支持GIF,swiper插件和网页用的一样,都会自动把图片拉到固定大小,所以做图的时候需要按需求大小制作。要不然会变形,还有就是SWIPER的官方文档属性需要写在wxml文件里面,就像我自已增加的 indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#ff3300" 一样。
效果展示
下面是官方对swiper参数的说明:
swiper
基础库 1.0.0 开始支持,低版本需做兼容处理。
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。
属性 |
类型 |
默认值 |
必填 |
说明 |
最低版本 |
---|---|---|---|---|---|
indicator-dots |
boolean |
false |
否 |
是否显示面板指示点 |
1.0.0 |
indicator-color |
color |
rgba(0, 0, 0, .3) |
否 |
指示点颜色 |
1.1.0 |
indicator-active-color |
color |
#000000 |
否 |
当前选中的指示点颜色 |
1.1.0 |
autoplay |
boolean |
false |
否 |
是否自动切换 |
1.0.0 |
current |
number |
0 |
否 |
当前所在滑块的 index |
1.0.0 |
interval |
number |
5000 |
否 |
自动切换时间间隔 |
1.0.0 |
duration |
number |
500 |
否 |
滑动动画时长 |
1.0.0 |
circular |
boolean |
false |
否 |
是否采用衔接滑动 |
1.0.0 |
vertical |
boolean |
false |
否 |
滑动方向是否为纵向 |
1.0.0 |
previous-margin |
string |
"0px" |
否 |
前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 |
1.9.0 |
next-margin |
string |
"0px" |
否 |
后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 |
1.9.0 |
display-multiple-items |
number |
1 |
否 |
同时显示的滑块数量 |
1.9.0 |
skip-hidden-item-layout |
boolean |
false |
否 |
是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 |
1.9.0 |
easing-function |
string |
"default" |
否 |
指定 swiper 切换缓动动画类型 |
2.6.5 |
bindchange |
eventhandle |
否 |
current 改变时会触发 change 事件,event.detail = {current, source} |
1.0.0 |
|
bindtransition |
eventhandle |
否 |
swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy} |
2.4.3 |
|
bindanimationfinish |
eventhandle |
否 |
动画结束时会触发 animationfinish 事件,event.detail 同上 |
1.9.0 |
easing-function 的合法值
值 |
说明 |
最低版本 |
---|---|---|
default |
默认缓动函数 |
|
linear |
线性动画 |
|
easeInCubic |
缓入动画 |
|
easeOutCubic |
缓出动画 |
|
easeInOutCubic |
缓入缓出动画 |
change
事件 source
返回值
从 1.4.0 开始,change
事件增加 source
字段,表示导致变更的原因,可能值如下:
-
autoplay
自动播放导致swiper变化; -
touch
用户划动引起swiper变化; - 其它原因将用空字符串表示。
- 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 数组属性和方法