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

uniapp 下支付宝小程序android 端转盘组件显示空白

Open faultaddr opened this issue 3 years ago • 3 comments

  • 你当前是什么框架(必填):uniapp
  • 你使用的是哪个包(必填):lucky-canvas v0.0.10.0
  • 你当前插件的版本(必填):v0.0.10.0
  • 当前环境是小程序还是浏览器(选填):支付宝小程序android 端
  • 详细描述你的bug:android端渲染不出lucky wheel,真机页面显示空白,ios 端可以,调试工具也可以
  • 问题代码(重要):
<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 '@lucky-canvas/uni/lucky-wheel'
  export default {
    components: { LuckyWheel },
    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>

faultaddr avatar Apr 18 '22 06:04 faultaddr

目前还没有兼容支付宝小程序, 所以估计会有一些小问题, 需要微调一下, 感兴趣的话你可以尝试自行调试, 欢迎PR

buuing avatar Apr 18 '22 07:04 buuing

okay,今明两天我尝试适配一下,有问题的话可能还得过来请教您

faultaddr avatar Apr 18 '22 09:04 faultaddr

好的哈

buuing avatar Apr 18 '22 09:04 buuing