小程序轮播组件
来自CloudWiki
Cloud17(讨论 | 贡献)2019年7月30日 (二) 03:06的版本 (创建页面,内容为“===swiper组件=== 滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。 文件:wx4-15.png ===swiper-item=== 仅可…”)
swiper组件
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。
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'] },