<template>
<view class="app-container">
<view v-for="item in 20" :key="item" class="warp-item" @click="open">
占位元素
</view>
<uni-popup ref="popup" type="bottom" background-color="#FFFFFF">
<canvas canvas-id="my-canvas" class="my-canvas"></canvas>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
const context = uni.createCanvasContext("my-canvas", this)
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.setStrokeStyle("#ff0000")
context.setLineWidth(2)
context.moveTo(160, 100)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke()
context.draw()
},
methods: {
open() {
this.$refs.popup.open()
}
}
}
</script>
<style scoped lang="scss">
.app-container {
height: 100vh;
background-color: #CCCCCC;
overflow-y: auto;
.warp-item {
height: 100rpx;
background-color: #FFFFFF;
margin-bottom: 10rpx;
display: flex;
justify-content: center;
align-items: center;
}
.my-canvas {
width: 100%;
height: 500rpx;
}
}
</style>
Miss丶盟
- 发布：2024-01-09 19:03
- 更新：2024-01-10 19:58
- 阅读：299
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows 11
HBuilderX类型： 正式
HBuilderX版本号： 3.8.7
第三方开发者工具版本号： 1.06.2308310
基础库版本号： 3.3.1
项目创建方式： HBuilderX
示例代码：
操作步骤：
滑动列表，滚动到中间或底部，然后点击占位元素，弹窗中的canvas绘制出现偏移，只在真机中存在问题，修改.app-container的高度为height: calc(100vh - 1px);即可解决问题，不知道是否属于bug
滑动列表，滚动到中间或底部，然后点击占位元素，弹窗中的canvas绘制出现偏移，只在真机中存在问题，修改.app-container的高度为height: calc(100vh - 1px);即可解决问题，不知道是否属于bug
预期结果：
滑动列表，滚动到中间或底部，然后点击占位元素，弹窗中的canvas绘制出现偏移，只在真机中存在问题，修改.app-container的高度为height: calc(100vh - 1px);即可解决问题，不知道是否属于bug
滑动列表，滚动到中间或底部，然后点击占位元素，弹窗中的canvas绘制出现偏移，只在真机中存在问题，修改.app-container的高度为height: calc(100vh - 1px);即可解决问题，不知道是否属于bug
实际结果：
滑动列表，滚动到中间或底部，然后点击占位元素，弹窗中的canvas绘制出现偏移，只在真机中存在问题，修改.app-container的高度为height: calc(100vh - 1px);即可解决问题，不知道是否属于bug
滑动列表，滚动到中间或底部，然后点击占位元素，弹窗中的canvas绘制出现偏移，只在真机中存在问题，修改.app-container的高度为height: calc(100vh - 1px);即可解决问题，不知道是否属于bug
bug描述：
当滚动区域的高度大于等于视口高度（100%或100vh），滚动列表后，popup组件中的canvas绘制出现了偏移，且只在真机出现，开发者工具正常展示，修改.app-container的高度为height: calc(100vh - 1px);即可解决问题，不知道是否属于bug
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
我测试了你提供的代码，的确有这个 canvas 漂移的问题，真机调试发现 canvas 元素本身的位置是正确的，但实际回执的位置不对。
使用新版本的 canvas 写法，弹窗后重新绘制，位置是正常的，怀疑是微信旧版的 canvas 处理不当。
Miss丶盟 (作者)
好的，感谢反馈，我这边试一下新版写法看看
2024-01-17 09:26