<div v-for="(row,rowIndex) in list" :key="rowIndex">
<div class="item" v-for="(item,index) in row" :key="index">
<div class="icon">
<div class="svg" :id="`frame_${item.gid}`"></div>
</div>
</div>
</div>
错误渲染(先渲染的svga)
setTimeout(() => {
list.forEach((item,index) => {
let parser = new SVGA.Parser(`#frame_${item.gid}`)
let player = new SVGA.Player(`#frame_${item.gid}`)
parser.load(`https://xxxx/${item.gid}_art`, function
(videoItem) {
player.setVideoItem(videoItem);
player.startAnimation();
}, function (error) {
window.winOcx.tip(error.message);
})
})
for (let i = 0; i < list.length; i += 4) {
this.list.push(list.slice(i, i + 4));
}
}, 100)
正确渲染(先渲染双层列表)
let list = res.data
for (let i = 0; i < list.length; i += 4) {
this.list.push(list.slice(i, i + 4));
}
setTimeout(() => {
this.list.forEach((row,index) => {
row.forEach(item=>{
let parser = new SVGA.Parser(`#frame_${item.gid}`)
let player = new SVGA.Player(`#frame_${item.gid}`)
parser.load(`https://xxxx/${item.gid}_art`, function
(videoItem) {
player.setVideoItem(videoItem);
player.startAnimation();
}, function (error) {
window.winOcx.tip(error.message);
})
})
})
}, 100)