在一些小程序中,我们经常会发现有的页面可以滑动(左右 上下),它其实是使用了微信小程序中的swiper组件。接下来让我们详细介绍swiper
swiper:滑块视图容器
它包含多种属性:
等等。。
我们需要注意的是:在swiper中只可放置<swiper-item/>
组件,否则会导致未定义的行为。
swiper-item
仅可放置在<swiper/>
组件中,宽高自动设置为100%。
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
item-id | String | "" | 该 swiper-item 的标识符 | ;1.9.0 |
<swiper class='swiper' bindchange='change' current="{{currentid}}" wx:if="{{show_swiper}}">
<block wx:for="{{paperdetails}}">
<swiper-item>
<form class='myfrm'>
<view class='section_title'>{{index+1}}.{{item.content}}</view>
<radio-group class="radio-group" bindchange='radioChange' data-id="{{item.id}}">
<view class='question' bindtap='next'>
<label><radio value="a%{{item.scorea}}" />A.{{item.itema}}</label>
<lable><radio value="b%{{item.scoreb}}" />B.{{item.itemb}}</lable>
<lable wx:if="{{item.itemc!=''}}"><radio value="c%{{item.scorec}}"/>C.{{item.itemc}}</lable>
<lable wx:if="{{item.itemd!=''}}"><radio value="d%{{item.scored}}"/>D.{{item.itemd}}</lable>
</view>
</radio-group>
</form>
</swiper-item>
</block>
</swiper>