安装

tnpm install --save @alipay/mas-promo-swiper

组件介绍

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

参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: className | 否 | string | 添加在组件最外层容器上的类名，可以用作自定义样式覆盖 | '' | 'custom-swiper' title | 是 | string | 组件标题 | '' | 'custom-swiper' data | 是 | Array<{ image: string; lottie?: string; btnText?: string; btnBgColor?: string; btnTextColor?: string; }> | 滑动项配置。lottie为lottie动画的json文件地址；image为图片背景，如果lottie不为空，则image将作为其placeholder使用；btnText为滑动项内的按钮文案，如果为空则不展示按钮，lottie不为空时也不展示按钮；btnBgColor为按钮的背景色; btnTextColor为按钮文案颜色 | [] | 见下文示例中的bannerList showBg | 否 | boolean | 是否展示容器的白色背景 | true | true showIndicatorDots | 否 | boolean | 是否显示下方的指示点 | true | true showExtraBtn | 否 | boolean | 是否显示右上角的“更多”图标按钮 | true | true onAppear | 否 | Function | 组件第一次渲染时触发该操作 | () => {} | - onBannerExpo | 否 | Function | 每张卡片第一次曝光时会触发该函数 | () => {} | - onExtraBtnClick | 否 | Function | 点击右上角“更多”图标按钮时的回调方法 | () => {} | - onBannerClick | 否 | Function | 点击banner项时的回调，入参为点击项在data中的下标 | (index: number) => {} | -

图片尺寸说明

多个图片时 图片尺寸默认为 540 X 288 一个图片时 图片尺寸默认为 654 X 349（多图片尺寸的等比缩放，540 X 288 图片也可使用，会被稍放大）

image标签 mode = 'aspectFill'

可通过class重新设置image宽、高来达到图片最完美展示

在小程序中使用

{
  "usingComponents": {
    "mas-promo-swiper": "@alipay/mas-promo-swiper/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
  <mas-mas-promo-swiper
    className="custom"
    title="营销组件"
    data="{{bannerList}}"
    showIndicatorDots="{{true}}"
    showExtraBtn="{{true}}"
    onExtraBtnClick="onExtraBtnClick"
    onBannerClick="onActionBtnClick"
    onBannerExpo="onActionBtnClick"
  />

// page.js
Page({
  data: {
    bannerList: [{
      image: 'https://gw.alipayobjects.com/mdn/rms_f544ed/afts/img/A*vHpjQayEcScAAAAAAAAAAABkARQnAQ',
      lottie: 'https://gw.alipayobjects.com/os/lottie-asset/line/data.json/data-43c40.json',
    }, {
      image: 'https://gw.alipayobjects.com/mdn/rms_f544ed/afts/img/A*AfuPR5j5bHYAAAAAAAAAAABkARQnAQ',
      btnText: '第二个banner',
    }, {
      image: 'https://gw.alipayobjects.com/mdn/rms_f544ed/afts/img/A*vHpjQayEcScAAAAAAAAAAABkARQnAQ',
      btnText: '第三个banner',
    }],
    showBg: false,
  },
  onBannerClick(index) {
    my.showToast({
      content: `点击了第${index}个banner`,
    });
  },
  onExtraBtnClick() {
    my.showToast({
      content: '点击了右上角「更多」',
    });
  },
  onActionBtnClick({ index, item }) {
    console.log('index', index);
    console.log('item', item);
  }
  onLoad() {},
});