<template>
<view>
<view v-for='(item,index) in picDatas' :key='item.id'>
<image :class='index == 0?"ani" : ""' :src='item.materialList[0].originUrl' :style='getStyle(item)'></image>
</view>
</view>
</template>
<script>
import {planData} from './data.js'
export default {
data() {
return {
picDatas: planData['1860849101461590017'].programList[0].pageList[0].itemList,
}
},
onLoad() {
console.log(this.picDatas)
},
methods: {
getStyle(item) {
return {
position: 'fixed',
top: item.pixelY + 'px',
left: item.pixelX + 'px',
width: item.width + 'px',
height: item.height + 'px',
background: item.bgColor + 'px',
transform: "rotate(" + (item.transform || 0) + "deg)",
borderRadius: (item.borderRadius || 0) + 'px',
overflow: 'hidden',
zIndex: item.zIndex
}
}
}
}
</script>
<style>
@keyframes identifier {
0% {
transform: rotate(90deg);
}
100% {
transform: rotate(0deg);
}
}
.ani {
animation-name: identifier;
animation-duration: 1s;
animation-iteration-count: infinite;
}
</style>
1***@qq.com
- 发布：2024-11-28 15:44
- 更新：2024-11-28 18:23
- 阅读：34
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows 10
HBuilderX类型： 正式
HBuilderX版本号： 4.29
手机系统： Android
手机系统版本号： Android 9.0
手机厂商： 模拟器
手机机型： Samsung Galaxy S20 Ultra
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
新建.vue页面，将以上的代码放入到页面中，代码中引用的data.js在bug描述的附件中，运行在安卓9的设备中，安卓设备的运行内存为1GB
新建.vue页面，将以上的代码放入到页面中，代码中引用的data.js在bug描述的附件中，运行在安卓9的设备中，安卓设备的运行内存为1GB
预期结果：
不出现闪屏的问题
不出现闪屏的问题
实际结果：
出现了闪屏的问题，图片每隔一段时间就会消失，重新渲染
出现了闪屏的问题，图片每隔一段时间就会消失，重新渲染
bug描述：
在页面上渲染了40张图片，给其中一张图片加了css动画，每隔几分钟，页面上的图片就会消失，过一会又会重新渲染，设备运行内存1G，存储空间128G
