@mas.io/mas-promo-swiper

安装

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() {},
});