0.1.0 • Published 4 years ago
@mas.io/mas-promo-swiper v0.1.0
安装
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() {},
});