9***@qq.com
9***@qq.com
  • 发布:2023-12-19 12:03
  • 更新:2023-12-19 14:04
  • 阅读:274

#插件讨论# 【 lucky-canvas【大转盘|九宫格|老虎机】抽奖插件 - ldq 】uniapp使用打包成微信小程序,提示无法获取宽度和高度

分类:uni-app

uniapp使用打包成微信小程序,提示无法获取宽度和高度

2023-12-19 12:03 负责人:无 分享
已邀请:
喜欢技术的前端

喜欢技术的前端 - QQ---445849201

可以试试这个例子,我这边可以正常操作,没报错

<template>  
    <view>  
        <LuckyWheel ref="myLucky" width="600rpx" height="600rpx" :blocks="blocks" :prizes="prizes" :buttons="buttons"  
            :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />  
    </view>  
</template>  

<script>  
    import LuckyWheel from '@/components/@lucky-canvas/uni/lucky-wheel' // 大转盘  
    import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid' // 九宫格  
    // import SlotMachine from '@/components/@lucky-canvas/uni/slot-machin' // 老虎机  
    export default {  
        components: {  
            LuckyWheel,  
            LuckyGrid  
        },  
        data() {  
            return {  
                blocks: [{  
                    padding: '13px',  
                    background: '#617df2'  
                }],  
                prizes: [{  
                        fonts: [{  
                            text: '0',  
                            top: '10%'  
                        }],  
                        background: '#e9e8fe'  
                    },  
                    {  
                        fonts: [{  
                            text: '1',  
                            top: '10%'  
                        }],  
                        background: '#b8c5f2'  
                    },  
                    {  
                        fonts: [{  
                            text: '2',  
                            top: '10%'  
                        }],  
                        background: '#e9e8fe'  
                    },  
                    {  
                        fonts: [{  
                            text: '3',  
                            top: '10%'  
                        }],  
                        background: '#b8c5f2'  
                    },  
                    {  
                        fonts: [{  
                            text: '4',  
                            top: '10%'  
                        }],  
                        background: '#e9e8fe'  
                    },  
                    {  
                        fonts: [{  
                            text: '5',  
                            top: '10%'  
                        }],  
                        background: '#b8c5f2'  
                    },  
                ],  
                buttons: [{  
                        radius: '50px',  
                        background: '#617df2'  
                    },  
                    {  
                        radius: '45px',  
                        background: '#afc8ff'  
                    },  
                    {  
                        radius: '40px',  
                        background: '#869cfa',  
                        pointer: true,  
                        fonts: [{  
                            text: '开始\n抽奖',  
                            top: '-20px'  
                        }]  
                    },  
                ],  
            }  
        },  
        methods: {  
            // 点击抽奖按钮触发回调  
            startCallBack() {  
                // 先开始旋转  
                this.$refs.myLucky.play()  
                // 使用定时器来模拟请求接口  
                setTimeout(() => {  
                    // 假设后端返回的中奖索引是0  
                    const index = 0  
                    // 调用stop停止旋转并传递中奖索引  
                    this.$refs.myLucky.stop(index)  
                }, 3000)  
            },  
            // 抽奖结束触发回调  
            endCallBack(prize) {  
                // 奖品详情  
                console.log(prize)  
            }  
        }  
    }  
</script>  

<style lang="scss">  

</style>

要回复问题请先登录注册