@mas.io/bu-banner v1.0.0

安装

tnpm install --save @alipay/adc-banner

组件介绍

行业小程序xxx组件，结合xxxx的组件样式，针对支付宝行业的各个不同场景进行定制化开发，满足业务需求。

参数说明

APP_INNER - 小程序内部页面 ALIPAY_APP - 支付宝页面 OUTER_APP - 外部小程序 H5 - 第三方h5页面

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例

isControl ｜ 否 ｜ boolean | 是否为自控模式(banner图片是否由使用方传入) | false | true

appId | 否(非自控模式下必传) ｜ string | 小程序appId(获取banner列表所需参数) | -- | '2088XXXXXXXX'

identifyPoint | 否(非自控模式下必传) ｜ string | 点位(获取banner列表所需参数) | -- | '1'

extendParams | 否 ｜ string | 扩展参数(非自控模式获取banner列表所需参数) ｜ -- | '{abc: 123}'

controlType | 否 ｜ Array | 需要自定义点击事件的跳转链接类型('APP_INNER', 'ALIPAY_APP', 'OUTER_APP', 'H5') | null | 'APP_INNER', 'OUTER_APP'

imgList | 否(自控模式下必传) | Array | 自控模式需要渲染的图片地址 | [] | 'https://xxxx/yy.png', 'https://aaa/bb.png'

onFeachDone ｜ 否 ｜ Function | 默认组件获取接口数据后执行的回调 ｜ null | (resData) => {}

onControlClick | 否 ｜ Function | 自定义点击事件；自控模式下，该函数参数为{index: '点击图片的下标', pictureUrl: '点击的图片地址'}；非自控模式下，若传了controlType 字段，则参数为 {linkType: '跳转链接类型', linkUrl: '跳转链接地址', pictureUrl: '图片地址', index: '点击图片的下标'} | null | (options) => {}

在小程序中使用

{
  "usingComponents": {
    "mas-xxxx": "@alipay/adc-banner/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
  <!-- 非自控模式 -->
    <!-- 默认点击事件 -->
 <mas-xxxx
    appId="2088xxxxxx"
    identifyPoint="123"
    extendParams="{abc: 123}"
  />
    <!-- 部分自定义点击事件 -->
 <mas-xxxx
    appId="2088xxxxxx"
    identifyPoint="123"
    extendParams="{abc: 123}"
    onControlClick="customerJump"
    controlType="['APP_INNER', 'ALIPAY_APP']"
  />
  <!-- 自控模式 -->
 <mas-xxxx
    isControl="{{true}}"
    imgList="{{['http://www.baidu.com/a.png']}}"
    onControlClick="customerJump"
  />

Badges