• 售前

  • 售后

热门帖子
入门百科

微信小步伐抽奖组件的使用步调

[复制链接]
劳心忉忉卫 显示全部楼层 发表于 2021-10-25 18:48:10 |阅读模式 打印 上一主题 下一主题
采取微信组件的方式提供,因组件内部使用了async/await,所以请在微信开发者工具"详情=》本地设置 勾上 加强编译和使用npm",小程序npm使用方法请参考:微信小程序-npm支持
先看效果图:


使用步调:

步调一:
安装依赖或前去githua下载源码,拷贝dist目录下的lottery-turntable目录
  1. npm i lottery-turntable-for-wx-miniprogram
复制代码
步调二:
页面JSON配置
  1. {
  2. "usingComponents": {
  3.   "lottery-turntable":"lottery-turntable-for-wx-miniprogram/lottery_turntable/index"
  4. }
  5. }
复制代码
步调三:
预备数据和增长事故处置惩罚(使用组件页面JS)
  1. const datas = [{
  2. "id": "792085712309854208",
  3. "imgUrl": "../../images/icon.png",
  4. "title": "迅雷白金会员月卡 - 1"
  5. }, {
  6. "id": "766410261029724160",
  7. "imgUrl": "../../images/icon.png",
  8. "title": "迅雷白金会员月卡 - 2"
  9. }, {
  10. "id": "770719340921364480",
  11. "imgUrl": "../../images/icon.png",
  12. "title": "迅雷白金会员月卡 - 3"
  13. }, {
  14. "id": "770946438416048128",
  15. "imgUrl": "../../images/icon.png",
  16. "title": "迅雷白金会员月卡 - 4"
  17. }, {
  18. "id": "781950121802735616",
  19. "imgUrl": "../../images/icon.png",
  20. "title": "迅雷白金会员月卡 - 5"
  21. }, {
  22. "id": "766411654436233216",
  23. "imgUrl": "../../images/icon.png",
  24. "title": "迅雷白金会员月卡 - 6"
  25. }, {
  26. "id": "770716883860332544",
  27. "imgUrl": "../../images/icon.png",
  28. "title": "迅雷白金会员月卡 - 7"
  29. }, {
  30. "id": "796879308510732288",
  31. "imgUrl": "../../images/icon.png",
  32. "title": "迅雷白金会员月卡 - 8"
  33. }];
  34. Page({
  35. data: {
  36.   datas: datas, // 数据
  37.   prizeId: '', // 抽中结果id,通过属性方式传入组件
  38.   config: {                 // 转盘配置,通过属性方式传入组件
  39.    titleLength: 7
  40.   }
  41. },
  42. /**
  43.   * 次数不足回调
  44.   * @param e
  45.   */
  46. onNotEnoughHandle(e) {
  47.   wx.showToast({
  48.    icon: 'none',
  49.    title: e.detail
  50.   })
  51. },
  52. /**
  53.   * 抽奖回调
  54.   */
  55. onLuckDrawHandle() {
  56.   this.setData({
  57.    prizeId: this.data.datas[Math.floor(Math.random() * 10 % this.data.datas.length)].id
  58.   });
  59. },
  60. /**
  61.   * 动画旋转完成回调
  62.   */
  63. onLuckDrawFinishHandle() {
  64.   const datas = this.data.datas;
  65.   const data = datas.find((item) => {
  66.    return item.id === this.data.prizeId;
  67.   });
  68.   wx.showToast({
  69.    icon: 'none',
  70.    title: `恭喜你抽中 ${data.title}`
  71.   })
  72.   this.setData({
  73.    prizeId: ''
  74.   });
  75. }
  76. })
复制代码
步调四:
页面使用
  1. <lottery-turntable
  2.    data="{{datas}}"
  3.    prize-id="{{prizeId}}"
  4.    count="{{5}}"
  5.    config="{{config}}"
  6.    bindLuckDraw="onLuckDrawHandle"
  7.    bindNotEnough="onNotEnoughHandle"
  8.    bindLuckDrawFinish="onLuckDrawFinishHandle"
  9.   ></lottery-turntable>
复制代码
步调五:
更改组件配置项(以下为默认配置),通过config属性传入一个js对象
  1. /**
  2. * ease: 取值如下
  3. * 'linear' 动画从头到尾的速度是相同的
  4. * 'ease' 动画以低速开始,然后加快,在结束前变慢
  5. * 'ease-in' 动画以低速开始
  6. * 'ease-in-out' 动画以低速开始和结束
  7. * 'ease-out' 动画以低速结束
  8. * 'step-start' 动画第一帧就跳至结束状态直到结束
  9. * 'step-end' 动画一直保持开始状态,最后一帧跳到结束状态
  10. */
  11. // 以下为默认配置
  12. let config = {
  13. size: {
  14.   width: '572rpx',
  15.   height: '572rpx'
  16. },                   // 转盘宽高
  17. bgColors: ['#FFC53F', '#FFED97'],    // 转盘间隔背景色 支持多种颜色交替
  18. fontSize: 10,              // 文字大小
  19. fontColor: '#C31A34',          // 文字颜色
  20. titleMarginTop: 12,           // 最外文字边距
  21. titleLength: 6             // 最外文字个数
  22. iconWidth: 29.5,            // 图标宽度
  23. iconHeight: 29.5,            // 图标高度
  24. iconAndTextPadding: 4,         // 最内文字与图标的边距
  25. duration: 8000,             // 转盘转动动画时长
  26. rate: 1.5,               // 由时长s / 圈数得到
  27. border: 'border: 10rpx solid #FEFAE4;', // 转盘边框
  28. ease: 'ease-out'            // 转盘动画
  29. };
复制代码
总结

到此这篇关于微信小程序抽奖组件的文章就介绍到这了,更多相干微信小程序抽奖组件内容请搜索草根技能分享从前的文章或继承欣赏下面的相干文章盼望各人以后多多支持草根技能分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作