1.0.0 • Published 2 years ago
miniprogram-grid-luckdraw v1.0.0
miniprogram-grid-luckdraw
小程序九宫格抽奖动画组件
- 支持布局调整
- 带有完整实例代码
- 调用简单, 与业务解耦(只有一个方法)
使用
- 安装
npm install --save miniprogram-grid-luckdraw
- 在需要使用 luckdraw 的页面 page.json 中添加 luckdraw 自定义组件配置
{
"usingComponents": {
"GridLuckdraw": "miniprogram-grid-luckdraw"
}
}
- 在wxml文件 挂载 luckdraw 组件,并声明id
<GridLuckdraw id="GridLuckdrawRef" />
- 在js文件中调用
const id = 1
this.selectComponent('#GridLuckdrawRef').setup({ id })
参数说明
参数 | 类型 | 是否必填 | 默认值 | 说明 |
---|---|---|---|---|
list | array | 是 | [] | 奖品列表 |
uniqueKey | string | 否 | 'id' | 唯一key |
imageSrcKey | string | 否 | 'src' | 奖品图片字段名 |
gridItemGap | number | 否 | 10 | 奖品布局间隙 |
gridItemWidth | number | 否 | 140 | 奖品宽度 |
gridItemHeight | number | 否 | 130 | 奖品高度 |
animated | boolean | 否 | false | 加载动画 (暂不支持) |
speed | number | 否 | 100 | 运行速度(speed 秒/次) |
minRunCount | number | 否 | 30 | 最小运行次数 |
diminishingCount | number | 否 | 25 | 开始减速的时机 (当运行多少次后开始减速) |
deceleration | string | 否 | 60 | 每次运行增大间隔时间 (秒/次) |
activeStyle | string | 否 | 'background-color: rgba(255, 249, 70, 0.7);border-radius: 20rpx;' | 抽奖动画选中样式 |
1.0.0
2 years ago