有一个列表页，数据量特别大，几千条甚至上万条，这时候想改变列表中的样式渲染的特别慢，怎么解决啊
传播星球
- 发布：2024-09-19 18:17
- 更新：2024-09-20 11:04
- 阅读：131
爱豆豆 - 办法总比困难多
用原生的复选框 测试也没问题 反应很快的
<checkbox-group>
<label v-for="item in 10000" style="display: block;">
<checkbox :value="item+''" :key="item" />-----{{item}}
</label>
</checkbox-group>我自己用图片模拟一个复选框 放上去 没出现卡顿或者反应慢的问题 你可以参考下
<template>
<view>
<view v-for="item in 10000" @tap="setCheckbox(item)" style="display: flex;padding: 14rpx 32rpx;">
<view class="checkbox" :class="checked.findIndex(items => items == item) !== -1 ? 'checked' : ''">
</view>
<view>
-----{{item}}
</view>
</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
const checked = ref([])
const setCheckbox = (item) => {
let checkedIndex = checked.value.findIndex(items => items == item)
if(checkedIndex == -1) {
checked.value.push(item)
} else {
checked.value.splice(checkedIndex,1)
}
}
</script>
<style>
.checkbox {
height: 50rpx;
width: 50rpx;
margin-right: 24rpx;
background-image: url('/static/logo.png');
background-repeat: no-repeat;
background-size: 100%;
}
.checked {
background-image: url('/static/checked.png');
}
</style>
传播星球 (作者)
好的我试试
2024-09-20 11:09
传播星球 (作者)
你好，我写一个demo，模拟我遇到的情况，跟你写的还是有点不同的，可以浮现渲染慢的问题
2024-09-21 11:11