roulette

功能描述

轮盘抽检功能

依赖的插件

无依赖插件，纯原生JS

快速使用

以下参数id，resultTo，data为必传，其他选传（下方传递参数为默认值）

//容器
<div id="roulette"></div>

var demo = new roulette({
    id: "roulette",//容器id
    data: [
        //奖项id，奖项名称，奖项价值或其他描述信息
        {id: 1, name: '奖品奖品奖品1', info: '$10'}, 
        {id: 2, name: '奖品2', info: '$10'},
        {id: 3, name: '奖品3', info: '$10'},
        {id: 4, name: '奖品4', info: '$10'}, 
        {id: 5, name: '奖品5', info: '$10'}, 
        {id: 6, name: '奖品6', info: '$10'}
    ],
    baseColor: '#FF9933',//主色调-圆环颜色
    ringHighlightColor: "#FFC55F",//圆环高亮部分颜色
    ringWidth: 20,//圆环宽度
    padding: 10,//奖品名称信息容器的padding
    panColors: ['#ffffa1', '#ffeda4', '#ffdb91'],//奖品信息的颜色值，奖品数量为颜色值length的整数倍为最佳，例如设置8个奖项，可以设置2、4、8中颜色值
    resultTo: function () {
        //此方法用于动态从后端获取抽奖结果，并使轮盘滚动到该结果，无论结果多少轮盘至少转动10周
        //this.scrollToIndex(礼品结果数组索引)
        this.scrollToIndex(1);
    },
     end: function (res) {
         // 这里是轮盘停止时的回调，返回设定的抽奖结果索引
         console.log(res)
     }
})

特别说明

如有疑问请邮件Nelson_Lee@outlook.com
是否仍需要帮助？ 请保持联络！
最后更新于 2024/07/22