# banner 广告位组件

# 介绍

可放置连续多个左右轮播的广告位

# 使用指南

# 一般用法

<tms-banner/>
属性 类型 默认值 必填 说明
bannerId String 是 banner位ID
customCity Boolean false 否 是否自定义城市信息
cityInfo Object 否 城市信息,用于获取指定城市的banner
当customCity=true时使用,其他情况下使用实时定位信息
cityInfo.province String 否 省份名
cityInfo.cityName String 否 城市名
extraParam Object 否 扩展参数,用于获取满足特定条件的banner
channelIds Array<String> 否 车辆渠道列表
display String block 否 组件块样式,支持block/inline
width Number 670 否 宽度,单位rpx
height Number 168 否 高度,单位rpx
borderRadius Number 8 否 圆角大小,单位rpx
borderRadiusImg String https://static.img.tai.qq.com/mp/components/banner/radius.png 否 banner圆角遮挡图
用于保证banner切换时的圆角效果,仅当display=inline时使用
请传递右上角位置的圆角图片,其他三个角复用统一图片并进行旋转
indicatorPos String center 否 导航元素水平方向位置,支持center/left/right
indicatorPosHor Number 28 否 导航元素距离左右向边缘位置
仅indicatorPos=left/right时有效
indicatorPos=left时表示距离左边缘位置
indicatorPos=right时表示距离右边缘位置
indicatorPosVer Number 10 否 banner导航元素距离底部边缘位置
backgroundColor String #eee 否 背景色
marginTop Number 0 否 顶部边距
marginBottom Number 0 否 底部边距
bind:updated eventhandle 否 数据更新完成
bind:change eventhandle 否 banner切换
bind:tap-item eventhandle 否 点击某个banner item

# bind:updated 事件数据结构

假定updated事件的回调方法函数参数为res,以下为res.detail的数据结构:

属性 类型 说明
state Number 是否有banner:0-无,1-有

# bind:change 事件数据结构

假定change事件的回调方法函数参数为res,以下为res.detail的数据结构:

属性 类型 说明
index Number 当前banner item的位置排在第几个
id String 当前banner item的ID
name String 当前banner item的名字
linkType Number 链接类型:0-小程序页面,1-WEB页
link String 链接URL
doReport Boolean 本次切换是否进行曝光数据上报

# bind:tap-item 事件数据结构

假定tap-item事件的回调方法函数参数为res,以下为res.detail的数据结构:

属性 类型 说明
index Number 当前banner item的位置排在第几个
id String 当前banner item的ID
name String 当前banner item的名字
linkType Number 链接类型:0-小程序页面,1-WEB页
link String 链接URL

# FAQ