# 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