lucky-canvas
lucky-canvas copied to clipboard
uniapp 下支付宝小程序android 端转盘组件显示空白
- 你当前是什么框架(必填):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>
目前还没有兼容支付宝小程序, 所以估计会有一些小问题, 需要微调一下, 感兴趣的话你可以尝试自行调试, 欢迎PR
okay,今明两天我尝试适配一下,有问题的话可能还得过来请教您
好的哈