npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ant-mini-wheel-draw

v1.0.1

Published

支付宝小程序大转盘抽奖组件

Downloads

12

Readme

ant-mini-wheel-draw

转盘玩法组件使用文档

Installation

yarn add ant-mini-wheel-draw

Usage

init
  • json
{
  "usingComponents": {
    "wheel": "ant-mini-wheel-draw/es/wheel/index"
  }
}
  • js
Page({
  data: {
    prizeList: [
      {
        name: 'H&M100元优惠券',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/nIQUKeYBbJWliGJVhVmx.png'
      }, {
        name: '2元话费券',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/HkrVjjjuxZPUMCUbPazb.png'
      }, {
        name: '45元飞猪出行券',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/cDctUxwBLPCszQHRapYV.png'
      }, {
        name: 'H&M10元优惠券',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/FAmIWZAWpUwlRFKqQDLz.png'
      }, {
        name: '2元流量券',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/cuGomeXzMyeeZMjvVjBj.png'
      }, {
        name: '未中奖',
        img: 'https://zos.alipayobjects.com/rmsportal/dwhgPyWAcXuvJAWlSSgU.png'
      }
    ],
    prizeName: '2元话费券',
    totalTimes: 2,
    curTimes: 0,
    result: '',
  },
  /*
    @param name 获奖项名字
    @param times 当前转动次数
  */
  onStart (name, times) {
    // 转盘开始转动
    this.setData({
      result: `第${times}次抽奖中,请稍候...`,
      curTimes: times++
    })
  },
  /*
    @param name 获奖项名字
    @param times 当前转动次数
  */
  onFinish (name, times) {
    // 转盘结束转动
     this.setData({
      result: name === '未中奖' ? '很遗憾,差点就中奖了' : `恭喜你,获得${name}`,
      prizeName: this.data.prizeList[Math.floor(Math.random() * 6)].name,
    })
  }
});
  • xaml
<view class="container">
  <wheel
    width="22em"
    prizeList="{{prizeList}}" // 奖项列表
    prizeName="{{prizeName}}" // 获奖项目名称
    rotTimes="{{totalTimes}}" // 转盘机会次数
    onStart="onStart" // 转盘开始旋转回调
    onFinish="onFinish" // 转盘结束旋转回调
  />
  <view class="times">
    <text>你还有{{totalTimes - curTimes}}次抽奖机会</text>
  </view>
  <view class="result">
    <text>{{result}}</text>
  </view>
</view>

Config Options

属性 | 类型 | 默认值 |含义 -----|------|---- | ---- width |Number|300|转盘容器宽度【必填】,默认单位 px initDeg |Number|0|转盘初始化角度旋转偏移【选填】,单位 reg rotTimes |Number|1|抽奖机会次数【选填】,当抽奖次数大于该值时不可再抽奖 prizeList |Array|[]|奖品列表【必填】,长度为6,每一项必须包含img(奖品图片) 和 name(奖品名字) prizeName |String|''|中奖的奖品名字【必填】,值需要存在于 prizeList 的 name 字段中 prizeWidth |Number|80|奖品图片宽度【选填】,默认单位 px,插件会根据 width 选项值自动计算,建议不填 prizePaddingTop |Number|20|奖品图片距圆弧的内边距【选填】,默认单位 px,插件会根据 width 选项值自动计算,建议不填 bgImg |String|背景图片src|转盘扇面背景图地址【选填】 btnImg |String|按钮图片 src|转盘按钮背景图地址【选填】 onStart |Function|(name, times) => {}|旋转开始回调【选填】,name:中奖项name,times:当前是第几次旋转 onFinish |Function|(name, times) => {}|旋转结束回调【选填】,name:中奖项name,times:当前是第几次旋转 onTimesUp |Function|() => {}| 抽奖次数用尽后,再次点击抽奖按钮会触发该回调

prizeWidth 每一个扇形区的奖品图片宽度,插件自动计算

prizePaddingTop 每一个扇形区的奖品图片距离圆弧的内边距,插件自动计算

以上两个选项当效果不佳时可以自定义,直接传入数字默认单位为px,需自定义单位可以传入字符串,如2em


initDeg参数视觉效果示例

bgImg(转盘背景图示例)|initDeg(旋转的角度) -----|----- initDeg为0或不填|initDeg为30 |

Preview

打开浏览器,即可看到效果

License

The MIT License (MIT).