爹
  • 发布:2019-04-14 09:33
  • 更新:2019-04-14 14:33
  • 阅读:1051

【报Bug】性能需要优化:在列表中使用v-if第二页开始卡,以及使用组件也会卡

分类:uni-app

详细问题描述

估计是触发整个视图重新渲染的问题导致,但是在pc端完全没有任何压力。

如果v-for循环里面包含v-if,则第二页开始变卡,每多翻一页多卡一倍的时间,如果改成直接赋值,没有v-if的方式的话,翻多少页都不卡。

另外v-for里使用组件也会卡,并且组件里没有v-if之类的需要重新计算值的东东,但如果没有v-if性能会明显好一点,但也是会卡

最后测试不卡的是去掉任何可能会包含二次计算的东东或用计算好的变量代替,包括v-if和{{xxx|| ''}}之类的东东。

这样很不好,不是吗?如果不能用组件,如何实现高可维护性的项目?如果不能在模板里用v-if,程序可读性会降低很多,开发成本也会有所提高。

能否优化,或是给出一个临时代替方案?
[内容]

重现步骤

[步骤]
[结果]
[期望]
[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilderX]

uni-app运行环境说明

[运行端是app]
[运行端版本号]

App运行环境说明

[Android版本号]
安卓也卡
[iOS版本号]
iphone6

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]
[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]
[App安装包或H5地址]
[可重现代码片段]

<view v-for="(user, index)  in list">  
    <view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">  
        <view class="uni-media-list-logo" @tap="goUserHome(user.userId)">  
            <image class="image" mode="aspectFill" :src="user.avatar + '?x-oss-process=style/thumb'" />  
        </view>  
        <view class="uni-media-list-body" style="height: 220upx;">  
            <view @tap="goUserHome(user.userId)" class="uni-media-list-text-top" style="height:56upx">  
                <text class="float-left"> </text>  
                {{user.firstAttribute || user.nickname}}<tag-match-mark :matchMark="user.matchMark"></tag-match-mark>  
                <text class="icon-tag certified" v-if="user.validateCard === '1'"></text>  
                <text class="icon-tag vip" v-if="user.vipLevel !== '0'"></text>  
                <text class="float-right">{{user.oftenRegionMin[0] || ''}}</text>  
                <text class="icon-tag certified" v-if="user.validateCard === '1'"></text>  
                <text style="margin-left: 10upx;" class="iconfont icon-shuangxin text-danger" v-if="user.isMatch === '1' "></text>  
            </view>  
            <view @tap="goUserHome(user.userId)"  
                  class="text-royal uni-media-list-text-bottom ellipsis2"  
                  style="min-height:90upx; line-height: 1.6em;">{{user.baseInfoLine1}}</view>  
            <view class="text-royal uni-media-list-text-bottom mini-photos-list">  
                <image v-for="(img, n) in photos"  
                        :key="n"  
                        @tap="previewPhotos(user.photos, n)"  
                        :src="img + '?x-oss-process=style/min-avatar'"  
                        class="min-avatar"></image>  
            </view>  
        </view>  
    </view>  
</view>  

联系方式

[QQ]

2019-04-14 09:33 负责人:无 分享
已邀请:
DCloud_heavensoft

DCloud_heavensoft

http://ask.dcloud.net.cn/article/35818

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