“小程序轮播组件”的版本间的差异
来自CloudWiki
(→案例) |
|||
第32行: | 第32行: | ||
效果图: | 效果图: | ||
− | [[文件: | + | [[文件:wx4-2.png]] |
===网页文件index.wxml=== | ===网页文件index.wxml=== |
2020年7月19日 (日) 07:56的版本
swiper组件
滑块视图容器。其中只可放置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
swiper-item
仅可放置在swiper组件中,宽高自动设置为100%。
属性 类型 默认值 必填 说明 最低版本 item-id string 否 该 swiper-item 的标识符 1.9.0
案例
效果图:
网页文件index.wxml
<!--pages/swiper/swiper.wxml--> <view> <swiper autoplay="true" interval="2000" indicator-dots="true" > <block wx:for="{{background}}" wx:key='swip' > <swiper-item> <view class='si {{item}}'></view> </swiper-item> </block> </swiper> </view>
CSS文件
/* pages/swiper/swiper.wxss */ .si{ display:block; height:150px; } .a{ background-color:yellow; } .b{ background-color:red; } .c{ background-color:blue; }
JS文件(数据绑定)
// pages/swiper/swiper.js Page({ /** * 页面的初始数据 */ data: { background: ['a', 'b', 'c'] },