lucky-canvas
lucky-canvas copied to clipboard
uniapp打包到小程序调用play方法产生异常
- 你当前是什么框架(必填):uniapp-vue3-ts
- 你使用的是哪个包(必填):uni
- 你当前插件的版本(必填):0.0.13
- 当前环境是小程序还是浏览器(选填):微信小程序 基础库2.30.2 node 16.17.0
- 详细描述你的bug:在模拟器上调试能完美显示出来,而且点击抽奖正常转动,但是用手机预览不是真机调试, 用手机预览也能正常看到配置的抽奖项目,但是只要调用play,抽奖项就会变为空白,
- [问题代码(重要):
// 代码开始, 别再放歪了行吗
<template>
<view>
<view style="margin: 20rpx 0">
<LuckyGrid
ref="luckyGridRef"
width="660rpx"
height="660rpx"
:prizes="prizes"
:blocks="blocks"
:default-config="defaultConfig"
></LuckyGrid>
</view>
<button @click="start">开始抽奖</button>
</view>
</template>
<script setup lang="ts">
import LuckyGrid from '@lucky-canvas/uni/lucky-grid.vue'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const prizes = ref<any[]>([])
const luckyGridRef = ref<InstanceType<typeof LuckyGrid>>()
const blocks = [
{
background: '#f7f7f7',
borderRadius: 20,
padding: '10px',
},
]
const defaultConfig = {
accelerationTime: 1000,
decelerationTime: 1500,
gutter: 10,
}
const start = () => {
luckyGridRef.value?.play()
setTimeout(() => {
luckyGridRef.value?.stop(1)
}, 2000)
}
const generateLootery = () => {
prizes.value = [
{
x: 0,
y: 0,
borderRadius: '30px',
imgs: [
{
width: 70,
height: 70,
top: 12,
src: '/static/108.png',
activeSrc:
'https://img.msicu.com/20230320/55FcEc3nGAXnfEVLB2gEH_53379.png',
},
],
},
{
x: 1,
y: 0,
borderRadius: '30px',
imgs: [
{
width: 70,
height: 70,
top: 12,
src: '/static/108.png',
activeSrc:
'https://img.msicu.com/20230320/55FcEc3nGAXnfEVLB2gEH_53379.png',
},
],
},
{
x: 2,
y: 0,
borderRadius: '30px',
imgs: [
{
width: 70,
height: 70,
top: 12,
src: '/static/108.png',
activeSrc:
'https://img.msicu.com/20230320/55FcEc3nGAXnfEVLB2gEH_53379.png',
},
],
},
{
x: 0,
y: 1,
borderRadius: '30px',
imgs: [
{
width: 70,
height: 70,
top: 12,
src: '/static/108.png',
activeSrc:
'https://img.msicu.com/20230320/55FcEc3nGAXnfEVLB2gEH_53379.png',
},
],
},
{
x: 1,
y: 1,
borderRadius: '30px',
imgs: [
{
width: 70,
height: 70,
top: 12,
src: '/static/108.png',
activeSrc:
'https://img.msicu.com/20230320/55FcEc3nGAXnfEVLB2gEH_53379.png',
},
],
},
{
x: 2,
y: 1,
borderRadius: '30px',
imgs: [
{
width: 70,
height: 70,
top: 12,
src: '/static/108.png',
activeSrc:
'https://img.msicu.com/20230320/55FcEc3nGAXnfEVLB2gEH_53379.png',
},
],
},
{
x: 0,
y: 2,
borderRadius: '30px',
imgs: [
{
width: 70,
height: 70,
top: 12,
src: '/static/108.png',
activeSrc:
'https://img.msicu.com/20230320/55FcEc3nGAXnfEVLB2gEH_53379.png',
},
],
},
{
x: 1,
y: 2,
borderRadius: '30px',
imgs: [
{
width: 70,
height: 70,
top: 12,
src: '/static/108.png',
activeSrc:
'https://img.msicu.com/20230320/55FcEc3nGAXnfEVLB2gEH_53379.png',
},
],
},
{
x: 2,
y: 2,
borderRadius: '30px',
imgs: [
{
width: 70,
height: 70,
top: 12,
src: '/static/108.png',
activeSrc:
'https://img.msicu.com/20230320/55FcEc3nGAXnfEVLB2gEH_53379.png',
},
],
},
]
}
onLoad((options) => {
generateLootery()
})
</script>
<style scoped></style>
// 代码结束