cv-banner 幻灯片 ¶
简要 ¶
普通幻灯片,可自定义图片大小和内容等,默认为透明背景。
示例 ¶
vue
<template>
<view class="content">
<view class="components-title">
<view class="components-title-t">cv-banner</view>
<view class="components-title-d">轮播图</view>
</view>
<view>平铺限高</view>
<cv-banner :dataLists="mockList" :paramConfig="{ image: 'image', text: 'text' }" :height="height" />
<view>卡片式</view>
<cv-banner-card :dataLists="mockList" :paramConfig="{ image: 'image', text: 'text' }" :height="height" />
</view>
</template>
<script>
export default {
data() {
return {
mockList: [{ image: '/static/1-1.jpg' }],
height: 100
};
},
onLoad() {
setTimeout(() => {
this.$testReqMock().then((res) => {
this.mockList = [
{ image: '/static/1-1.jpg', text: '这是一行文字哦' },
{ image: '/static/1-1.jpg', text: '这是二行文字哦' },
{ image: '/static/1-1.jpg', text: '这是三行文字哦' }
];
});
this.height = 160;
}, 1000);
},
methods: {
bindTimeChange(e) {},
clickTest(e) {
console.log(this.formData.name);
}
}
};
</script>
<style>
.content {
overflow: auto;
min-height: 600px;
background-color: #eee;
position: relative;
}
.default-slot {
min-height: 100px;
background-color: #ffffff;
text-align: center;
margin: 5px 15px;
}
</style>
属性 ¶
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
dataLists | Array | - | 图片数组 |
height | Number | 160 | 轮播的高度,单位:px |
paramConfig | Object | - | dataLists字段配置 |
indicatorDots | Boolean | true | 是否显示面板指示点 |
- [
paramConfig
]参数明细
字段名 | 类型 | 默认值 | 说明 |
---|---|---|---|
image | String | image | 图片地址 |
text | String | text | 底部文字 |
事件 ¶
属性名 | 说明 |
---|---|
@change | current 改变时会触发 change 事件,event.detail = '{current: current, source: source}' |