uni-app 纯nvue性能优势体现在哪?list下cell 3张图卡到爆!!
uni-app 纯nvue性能优势体现在哪?list下cell 3张图卡到爆!!
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Windows | Windows 64位家庭版 | HBuilderX |
示例代码:
<template>
<list ref="list" @loadmore="loadMore" loadmoreoffset="20" @scroll="onScroll">
<refresh class="refresh" @refresh="onRefresh" @pullingdown="onPullingDown" :display="refreshing ? 'show' : 'hide'">
<text class="refresh-text">{{refreshText}}</text>
</refresh>
<cell v-for="(item,index) in list" :key="index" class="list">
<cell-Vod-Item :vo="vo" v-for="(vo,key) in item" :key="key"></cell-Vod-Item>
</cell>
<cell class="loadmore">
<text class="loadmore-text">{{loadingText}}</text>
</cell>
</list>
</template>
cell-Vod-Item组件
<template>
<div>
<div class="item-pic" >
<image class="vod-pic" :src="my_url_img(vo.vod_pic)" mode="aspectFill">
</image>
<div class="cost" v-if="vo.vod_remark">
<text class="cost-text" >{{vo.vod_remark}}</text>
</div>
<div class="bottom-bg">
<text class="sense">{{vo.vod_score}}</text>
</div>
</div>
<div class="item-bottom">
<text class="item-name text">{{vo.vod_name}}</text>
<text class="item-Star">类型:{{vo.vod_class ? vo.vod_class : vo.type.type_name}}</text>
</div>
</div>
</template>
别说什么“”请提供完整示例“,完整包括请求验证各种封装+后端,一下子发不过来。后端在本地搭建 也是开发阶段,这点遍历方式详细官方技术还是分分钟能写出来,图片列表数据可以调用腾讯视频的电影列表,我也是调用那里的。
操作步骤:
不需要什么步骤,打开页面就是这样的
预期结果:
不要卡顿
实际结果:
很卡顿
bug描述:
同样是json数据和图片列表,网页使用jquery 的$ajax + for 遍历 都不至于如此卡顿,vue H5端 端浏览器运行也不会卡,nvue 的list 还号称有内存回收机制!!!!!
重点:图片尺寸 宽770px 高1080px ,也不算很大。地址:http://puui.qpic.cn/vcover_vt_pic/0/mzc002000w08m6u1614051201965/0 在列表中用css控制为 width: 245rpx; height: 350rpx;
在这个社区中也有类似的帖子,都是没得到什么有效的回复就不了了之。。。。
备用演示视频
视频中可以看出根本无法流畅的上下滚动,都是一卡一卡的。
更多关于uni-app 纯nvue性能优势体现在哪?list下cell 3张图卡到爆!!的实战教程也可以访问 https://www.itying.com/category-93-b0.html
好的 ,感谢回复!!
不过 list 下 cell 单张图片,就算是4~5MB的图,就算是几十兆的视频组件都是很流畅的,这也是我选择纯NVUE的理由。如果是放 两张图~到3张图就会出现这个帖子的情况,我想应该不是你说原生排版本来就这样,在实际项目中 网络图片并不少用,不一定非得控制图片体积到几十KB,我也相信一定有优化的方案!!
回复 大图APP: 我不知道该咋说,我们内部做产品,列表如果敢用几百k的图,肯定被k
遇到同样的问题,nvue在产品详情页,有些页面非常流畅,有些页面图片不多,卡得一逼,这个问题是否有优化的空间?又或者不是图片大小问题,是图片解析的兼容性导致?
用过的云存储,可以针对图片设置缩略图规则,列表上就可以用这个图
270k的图片都算大图吗???