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

【报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

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