gg-banner-card 卡片式幻灯片 | GGUI - 一套代码运行多端 | 一端所见即多端所见

gg-banner-card

卡片式轮播图，可自定义卡片大小和内容等，默认为透明背景。

在 script 中引用组件，

若使用uni-app的 easycom 引入方式，则无需在script中重复引用

import ggBannerCard from '@/components/gg-banner-card/gg-banner-card.vue'
export default {
    components: {ggBannerCard}
}

1
2
3
4

在 template 中使用组件

<gg-banner-card :dataLists="dataLists" :paramConfig="{image:'image',text:'text'}" />

属性名	类型	默认值	说明
dataLists	Array	-	图片数组
height	Number	160	轮播的高度，单位：px
paramConfig	Object	-	dataLists字段配置
indicatorDots	Boolean	true	是否显示面板指示点
margin	string	35px	前后边距，可用于露出前后一项的一小部分，接受 px 和 rpx 值
imageMode	string	aspectFill	图片裁剪、缩放的模式详见(mode) (opens new window)
@change	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}

字段名	类型	默认值	说明
image	String	image	图片地址
text	String	text	底部文字

# gg-banner-card 卡片式幻灯片