Skip to content
内容大纲
官方QQ交流群
pc端ui:468705115   点此加入
移动端ui:468217742   点此加入
技术交流1:87208295   点此加入
技术交流2:787747122   点此加入
官网
云控制台
开放平台
关注微信公众号
代码仓库: 码云

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>

属性

属性名类型默认值说明
dataListsArray-图片数组
heightNumber160轮播的高度,单位:px
paramConfigObject-dataLists字段配置
indicatorDotsBooleantrue是否显示面板指示点
  • [ paramConfig ]参数明细
字段名类型默认值说明
imageStringimage图片地址
textStringtext底部文字

事件

属性名说明
@changecurrent 改变时会触发 change 事件,event.detail = '{current: current, source: source}'

Copyright © 2017 10yun.com | 十云提供计算服务-IPV6 | ctocode组开发