1***@qq.com
1***@qq.com
  • 发布:2020-11-16 15:38
  • 更新:2022-11-08 16:05
  • 阅读:1206

【报Bug】nvue页面图片多了靠后的不显示!!!

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.9.8

手机系统: Android

手机系统版本号: Android 10

手机厂商: 一加

手机机型: 一加6,一加8t

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<view class="just-product">
<view class="just-product-left">
<view class="just-product-item" v-for="(item,index) in RecommendPrudct[0]" :key="index" @click="toProductInfo(item.Id)">
<image class="just-product-img" :src="item.DefaultPictureModel.FullSizeImageUrl" lazy-load mode="aspectFit"></image>
<view class="just-product-info">
<text class="just-product-name">{{item.Name}}</text>
<view class="price-car">
<text class="just-product-price">{{item.AddToCart.CustomerEnteredPriceRange}}{{item.ProductPrice.Price}}</text>
<view class="just-product-car">
<image class="just-product-car-img" src="~@/static/cart.png"></image>
</view>
</view>
</view>
</view>
</view>
<view class="just-product-right">
<view class="just-product-item" v-for="(item,index) in RecommendPrudct[1]" :key="index" @click="toProductInfo(item.Id)">
<image class="just-product-img" :src="item.DefaultPictureModel.FullSizeImageUrl" lazy-load mode="aspectFit"></image>
<view class="just-product-info">
<text class="just-product-name">{{item.Name}}</text>
<view class="price-car">
<text class="just-product-price">{{item.AddToCart.CustomerEnteredPriceRange}}{{item.ProductPrice.Price}}</text>
<view class="just-product-car">
<image class="just-product-car-img" src="~@/static/cart.png"></image>
</view>
</view>
</view>
</view>
</view>
</view>

操作步骤:

···

预期结果:

···

实际结果:

···

bug描述:

项目有vue页面和nvue页面,首页是nvue页面。

nvue页面图片靠前的会显示,越往后就不会显示。只要有不显示,那所有的nvue页面的图片就都不会显示。

web端显示正常,app端有问题。

图片地址为网络地址,测试本地图片一样不显示。

请问是什么原因。

2020-11-16 15:38 负责人:无 分享
已邀请:
DCloud_uniCloud_JSON

DCloud_uniCloud_JSON

疑似手机内存爆了,尝试重启手机看看是否仍然复现。
优化建议1.用nvue的list组件有内存回收机制。2显示缩略图不要显示大图。

如果是unicloud阿里云版可以使用
OSS图片支持拼接url实现图片缩略图,配置如下:
按百分比缩放:
?x-oss-process=image/resize,p_12
将原图指定按短边缩略 100x100
?x-oss-process=image/resize,m_lfit,h_200,w_200

例子:
http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,m_lfit,h_200,w_200

  • 1***@qq.com (作者)

    改用list组件,问题一样

    2020-11-16 16:43

  • 1***@qq.com (作者)

    可以了,list加小图显示

    2020-11-16 16:48

4***@qq.com

4***@qq.com

楼主,请问怎么解决的,用list组件无效,可以提供下代码吗

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