lucky-canvas icon indicating copy to clipboard operation
lucky-canvas copied to clipboard

uniapp打包到小程序调用play方法产生异常

Open shenhao98 opened this issue 1 year ago • 3 comments

  • 你当前是什么框架(必填):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>

// 代码结束

shenhao98 avatar Mar 20 '23 14:03 shenhao98