uni-app image组件里循环一个带字符串转数组的函数时渲染多次的问题

uni-app image组件里循环一个带字符串转数组的函数时渲染多次的问题

开发环境 版本号 项目创建方式
Windows 10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：10

HBuilderX类型：Alpha

HBuilderX版本号：3.1.1

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：红米K30

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<view v-if="scrollTop>400" class="backTop" >  
    <image :src="src" mode="widthFix" />  
</view>  
<scroll-view  class="listmain" [@scrolltolower](/user/scrolltolower)="jumppage_city"  scroll-y="true" v-if="citycircle">  
<view v-for="(itemimg,indeximg) in analysisimg(item.imglist)" :key="indeximg" class="imgview" >  
<image class="ping_img" mode="aspectFill"   :src="imgsrcurl+itemimg"></image>  
</view>

其中

data() {  
    return {  
scrollTop:0,  
src: '../../static/back-top/top.png',  
}  
},  
onPageScroll(e) {  
        scrollTop = e.scrollTop;  
    },  
methods: {  
analysisimg(imgarrstr) {  
        var imglist=imgarrstr.split(";");  
        console.log(imglist)  
        return  imglist;      
    },    
}

每次拉动滚动框的时候都会执行analysisimg函数，性能极度地被耗掉，经测试是监听onPageScroll之后滚动页面都会重新渲染image导致都要执行analysisimg函数。

操作步骤：

每次拉动滚动框的时候循环显示image都会执行字符串转数组函数，性能极度地被耗掉

预期结果：

每次拉动滚动框的时候循环显示image字符串转数组函数只执行一次

实际结果：

每次拉动滚动框的时候循环显示image都会执行字符串转数组函数

bug描述：

经核查，监听onPageScroll时传递给页面数据时会每次都会渲染image。


更多关于uni-app image组件里循环一个带字符串转数组的函数时渲染多次的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

找到原因了，在用了一键弹到顶部的插件造成的

更多关于uni-app image组件里循环一个带字符串转数组的函数时渲染多次的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


插件造成这个问题也是监听onPageScroll造成的，请看上面问题修改过的。

这是一个典型的性能优化问题，主要原因是每次滚动都会触发页面重新渲染，导致analysisimg函数被重复执行。以下是解决方案：

  1. 在data中预先处理图片数组，避免在模板中调用函数：
data() {
  return {
    scrollTop: 0,
    src: '../../static/back-top/top.png',
    processedImgList: [] // 存储处理后的图片数组
  }
},
mounted() {
  this.processedImgList = this.analysisimg(this.item.imglist);
},
methods: {
  analysisimg(imgarrstr) {
    return imgarrstr.split(";");
  }
}
  1. 修改模板代码，直接使用处理后的数组：
<view v-for="(itemimg,indeximg) in processedImgList" :key="indeximg" class="imgview">
  <image class="ping_img" mode="aspectFill" :src="imgsrcurl+itemimg"></image>
</view>
  1. 如果数据是动态获取的，可以在获取数据后立即处理：
async getData() {
  const res = await api.getData();
  this.processedImgList = this.analysisimg(res.imglist);
}
回到顶部