叶凌风
叶凌风
  • 发布:2021-02-04 20:05
  • 更新:2021-02-04 20:17
  • 阅读:435

【报Bug】image组件里循环一个带字符串转数组的函数的时候渲染多次的问题

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: Alpha

HBuilderX版本号: 3.1.1

手机系统: Android

手机系统版本号: Android 11

手机厂商: 小米

手机机型: 红米K30

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
	<view v-if="scrollTop>400" class="backTop" >  
		<image :src="src" mode="widthFix" />  
	</view>  
	<scroll-view  class="listmain" @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>
</scroll-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。

2021-02-04 20:05 负责人:无 分享
已邀请:
叶凌风

叶凌风 (作者) - 叶凌风

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

  • 叶凌风 (作者)

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


    2021-02-04 21:07

该问题目前已经被锁定, 无法添加新回复