微信小程序抽奖组件

微信小程序抽奖组件

采用微信组件的方式提供，因组件内部使用了async/await，所以请在微信开发者工具"详情=》本地设置 勾上 增强编译和使用npm"，小程序npm使用方法请参考：微信小程序-npm支持

先看效果图：

使用步骤：

• 步骤一：

  安装依赖或前往githua下载源码，拷贝dist目录下的lottery-turntable目录

  npm i lottery-turntable-for-wx-miniprogram
  

• 步骤二：

  页面JSON配置

  {
    "usingComponents": {
      "lottery-turntable":"lottery-turntable-for-wx-miniprogram/lottery_turntable/index"
    }
  }
  

• 步骤三：

  准备数据和增加事件处理（使用组件页面JS）

  const datas = [{
    "id": "792085712309854208",
    "imgUrl": "../../images/icon.png",
    "title": "迅雷白金会员月卡 - 1"
  }, {
    "id": "766410261029724160",
    "imgUrl": "../../images/icon.png",
    "title": "迅雷白金会员月卡 - 2"
  }, {
    "id": "770719340921364480",
    "imgUrl": "../../images/icon.png",
    "title": "迅雷白金会员月卡 - 3"
  }, {
    "id": "770946438416048128",
    "imgUrl": "../../images/icon.png",
    "title": "迅雷白金会员月卡 - 4"
  }, {
    "id": "781950121802735616",
    "imgUrl": "../../images/icon.png",
    "title": "迅雷白金会员月卡 - 5"
  }, {
    "id": "766411654436233216",
    "imgUrl": "../../images/icon.png",
    "title": "迅雷白金会员月卡 - 6"
  }, {
    "id": "770716883860332544",
    "imgUrl": "../../images/icon.png",
    "title": "迅雷白金会员月卡 - 7"
  }, {
    "id": "796879308510732288",
    "imgUrl": "../../images/icon.png",
    "title": "迅雷白金会员月卡 - 8"
  }];
  
  Page({
    data: {
      datas: datas, // 数据 
      prizeId: '',  // 抽中结果id，通过属性方式传入组件
      config: { 		// 转盘配置，通过属性方式传入组件
        titleLength: 7
      }
    },
    /**
     * 次数不足回调
     * @param e
     */
    onNotEnoughHandle(e) {
      wx.showToast({
        icon: 'none',
        title: e.detail
      })
    },
  
    /**
     * 抽奖回调
     */
    onLuckDrawHandle() {
      this.setData({
        prizeId: this.data.datas[Math.floor(Math.random() * 10 % this.data.datas.length)].id
      });
    },
  
    /**
     * 动画旋转完成回调
     */
    onLuckDrawFinishHandle() {
      const datas = this.data.datas;
      const data = datas.find((item) => {
        return item.id === this.data.prizeId;
      });
      wx.showToast({
        icon: 'none',
        title: `恭喜你抽中 ${data.title}`
      })
      this.setData({
        prizeId: ''
      });
    }
  })
  
  

• 步骤四：

  页面使用

• 步骤五：

  更改组件配置项（以下为默认配置），通过config属性传入一个js对象

  /**
   * ease: 取值如下
   * 'linear'  动画从头到尾的速度是相同的
   * 'ease'  动画以低速开始，然后加快，在结束前变慢
   * 'ease-in'  动画以低速开始
   * 'ease-in-out'  动画以低速开始和结束
   * 'ease-out'  动画以低速结束
   * 'step-start'  动画第一帧就跳至结束状态直到结束
   * 'step-end'  动画一直保持开始状态，最后一帧跳到结束状态
   */
  // 以下为默认配置
  let config = {
    size: {
      width: '572rpx',
      height: '572rpx'
    },                                      // 转盘宽高
    bgColors: ['#FFC53F', '#FFED97'],       // 转盘间隔背景色 支持多种颜色交替
    fontSize: 10,                           // 文字大小
    fontColor: '#C31A34',                   // 文字颜色
    titleMarginTop: 12,                     // 最外文字边距
    titleLength: 6                          // 最外文字个数
    iconWidth: 29.5,                        // 图标宽度
    iconHeight: 29.5,                       // 图标高度
    iconAndTextPadding: 4,                  // 最内文字与图标的边距
    duration: 8000,                         // 转盘转动动画时长
    rate: 1.5,                              // 由时长s / 圈数得到
    border: 'border: 10rpx solid #FEFAE4;', // 转盘边框
    ease: 'ease-out'                        // 转盘动画
  };