<ex-viewpager>是 Tenon 中视图轮播组件
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
data | Array | [] | 绑定的数据结构 |
itemSpacing | Number | String | 0 |
edgeSpacing | Number | String | 0 |
scaleFactor | Number | 1 | 前后Item放缩的比例 |
alphaFactor | Number | 1 | 前后Item透明度的比例 |
canLoop | Boolean | false | 是否可以无限循环 |
autoPlay | Boolean | false | 是否自动播放 |
loopInterval | Number | 0 | 自动轮播的时间间隔,单位ms(0时autoPlay失效) |
- 通用样式,可参考样式介绍
备注:View Item点击事件
参数:@param(position)
属性名 | 类型 | 说明 | 示例 |
---|---|---|---|
position | Number | 当前索引 | position:0 |
备注:页面改动事件
参数:@param(current,total)
属性名 | 类型 | 说明 | 示例 |
---|---|---|---|
current | Number | 当前索引 | current:0 |
total | Number | 总页数 | total:0 |
备注:页面改动事件
参数:@param(position,percent)
属性名 | 类型 | 说明 | 示例 |
---|---|---|---|
position | Number | 当前索引 | position:0 |
percent | Number | 当前滚动的百分比(0~1) | percent:0 |
<ex-viewpager
class="banner"
:list="list"
:itemSpacing="10"
:edgeSpacing="50"
:scaleFactor="0.99"
:alphaFactor="1"
:canLoop="true"
:autoPlay="true"
:loopInterval="2000"
@itemClick="handleItemClick"
@pageChange="handlePageChange"
@pageScroll="handlePageScroll"
>
<template v-slot:item="item">
<view class="banner-item" @tap="handleClickTap(item)">
<image class="banner-image" :src="item.data.url"></image>
</view>
</template>
</ex-viewpager>