微信小程序——UIswiper
Posted Jason Zhang~
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序——UIswiper相关的知识,希望对你有一定的参考价值。
swiper
滑块视图容器,常用来做Banner广告条,简单的控制轮播。其中只可放置swiper-item
组件。
常用属性
swiper-item中无特殊属性,作为swiper的子布局、Item的父布局。
- indicator-dots
boolean
是否显示面板指示点。默认为false
不显示。注意:字符串只要不为空就算是true
,若要直接指定boolean类型的值需要写成indicator-dots="false"
。 - indicator-color
color
指示点颜色 - indicator-active-color
color
当前选中的指示点颜色。 - current
number
当前所在滑块的 index,默认为0,很少需要手动设定指定该值为其他值。 - autoplay
boolean
是否自动切换,默认为false
。 - interval
number
自动切换时间间隔,单位为ms,默认为5000。 - duration
number
滑动切换动画时长,单位为ms,默认为500。 - circular
boolean
是否采用衔接滑动,默认为false
,若设为true
,则最后一个滑动到第一个是循环式的而非快速逆向转到第一个,这里建议设为true
,体验更好。 - vertical
boolean
滑动方向是否为纵向,默认为false
即横向。横向滑动时指示点在下方,纵向滑动时指示点在右侧。 - previous-margin、next-margin
string
前边距、后边距,可用于露出前一项、后一项的一小部分。 - display-multiple-items
number
同时显示的滑块数量,默认为1。设为2时屏幕内同时显示2个item,2个指示器处于选中激活状态。 - skip-hidden-item-layout
boolean
是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息。默认为false
,具体效果还未实践。 - easing-function
string
指定 swiper 切换缓动动画类型,需要版本库2.6.5
才支持,默认值default
默认缓动函数、linear
线性动画、easeInCubic
缓入动画、easeOutCubic
缓出动画、easeInOutCubic
缓入缓出动画。一般情况不需要使用。 - bindchange
eventhandle
current 改变时会触发 change 事件,event.detail = current, source。具体效果还未实践。 - bindtransition
eventhandle
swiper-item 的位置发生改变时会触发 transition 事件,event.detail = dx: dx, dy: dy,需要版本库2.4.3
才支持。具体效果还未实践。 - bindanimationfinish
eventhandle
动画结束时会触发 animationfinish 事件,event.detail 同上。具体效果还未实践。
该笔记实现效果:
本文源码地址,若需git下载该tag版本,请注意命令指定tag。
以上是关于微信小程序——UIswiper的主要内容,如果未能解决你的问题,请参考以下文章