uniApp大转盘插件使用说明--powered by www.deituicms.com

deituiCMS

运营交流 bug反馈新功能模板教程

发表新帖

uniApp大转盘插件使用说明

运营交流未结

雷锋叔叔

2021年01月16日

uniApp大转盘插件使用说明

turnWheel.js

var turnWheel = {
        //奖品接口 ，可以通过服务器设置接口
    rewards: [],
    //每个散型的颜色设置
    colors: [
        "#AE3EFF",
        "#4D3FFF",
        "#FC262C",
        "#3A8BFF",
        "#EE7602",
        "#FE339F",
        "#4D3FFF",
        "#FC262C"
    ],
    //转盘外圆的半径
    outsideRadius: 160,
    //转盘奖品位置距离圆心的距离 
    textRadius: 200,
    //转盘内圆的半径 
    insideRadius: 68,
    //开始角度 
    startAngle:270/Math.PI,
    //点击旋转状态 false:停止;ture:旋转 
    bRotate: false,
    //每次旋转动画角度 
    rotateAg: 5,
    //每次时间间隔
    rotateLimit: 20,
    //保存的动画timer
    timer: 0,
    //结束的时间
    goTime: 1000,
    //canvas的ctx
    ctx: false,
    //宽度
    width:320,
    //高度
    height:320,
    init: function() {
          
        this.ctx =  uni.createCanvasContext('wheelCanvas');
         
    },
    draw: function() {
         
    },
    /*
        index 奖品的索引
        callback 成功回调
        doing 进度回调
    */
    goRoate: function(index, callback,doing) {
         
    }
};
module.exports=turnWheel;

index.vue调用

注意：

1、需要 ready时设置 onLoad 不行

2、先获取奖品数据，再实例化画布

3、大转盘旋转使用的css动画，canvasStyle

100

101

102

103

104

105

106

107

108

109

110

111

112

<template>
    <view >
        <div class="wheel mgb-10">
            <canvas :style="canvasStyle" @error="canvasIdErrorCallback" class="wheel-canvas" canvas-id="wheelCanvas" id="wheelCanvas" width="320" height="320"></canvas>
            <img  @click="goRate()" class="wheel-pointer" src="../../static/wheel-pointer.png" />
        </div> 
        <div style="padding:10px;text-align:center ;">
            <div style="margin-bottom:10px;">得推大转盘</div>
            <a style="color:#323232;text-decoration: none;" target="_blank" href="http://www.deituicms.com">官网：http://www.deituicms.com</a>
        </div>
        <div v-if="showTip" class="tipBox">
            <div class="tipBox-msg">{{msg}}</div>
        </div>
    </view>
</template>
 
<script>
    import turnWheel from "../../common/turnWheel.js";
    export default {
        data() {
            return {
                title: 'Hello',
                canvasStyle:"",
                msg:"",
                showTip:false
            }
        },
        //这边需要 ready时设置 onLoad 不行
        onReady() {
                this.getRewards();
                             
        },
        methods: {
                getRewards:function(){
                        http.get({
                            url:"",
                            success:function(res){
                                turnWheel.rewards=res.data.list;
                                turnWheel.init();
                      
                                    turnWheel.draw();
                            }
                        })
                      
                     
                },
            goRate:function(){
                console.log("click")
                var that=this;
                http.get({
                            url:"",
                            success:function(res){
                                var index=res.data.index;
                        turnWheel.goRoate(turnWheel.rewards.length-index,function(){
                            that.showTip=true;
                            that.msg=turnWheel.rewards[index].description;
                              
                        },function(e){
                              
                            that.canvasStyle={
                                transform:e
                            };
                        });
                                    }
                                })    
                 
            },
            canvasIdErrorCallback: function (e) {
                console.error(e.detail.errMsg)
            }
        }
    }
</script>
 
<style>
    .wheel {
        display: block;
        width: 320px;
        height: 320px;
        position: relative;
         
        margin: 0 auto;
        margin-top: 30px;
    }
     
    .wheel-pointer {
        position: absolute;
        width: 156px;
        height: 156px;
        left: 80px;
        top: 80px;
        cursor: pointer;
    }
     
    .wheel-canvas {
        width: 320px;
        height: 320px;
    }
    .tipBox{
        position: fixed;
        bottom: 120px;
        width: 200px;
        left: 50%;
        margin-left:-100px ;
        background-color: #4CD964;
    } 
    .tipBox-msg{
        padding: 10px 6px;
        text-align: center;
        color: #fff;
    }
</style>

消灭零回复

关注