miniprogram-grid-luckdraw

小程序九宫格抽奖动画组件

• 支持布局调整
• 带有完整实例代码
• 调用简单, 与业务解耦(只有一个方法)

使用

1. 安装

npm install --save miniprogram-grid-luckdraw

2. 在需要使用 luckdraw 的页面 page.json 中添加 luckdraw 自定义组件配置

{
  "usingComponents": {
    "GridLuckdraw": "miniprogram-grid-luckdraw"
  }
}

3. 在wxml文件 挂载 luckdraw 组件,并声明id

<GridLuckdraw id="GridLuckdrawRef" />

4. 在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;' | 抽奖动画选中样式 |