uni-app uni-cms-article组件在小程序、App大图浏览存在问题 每次大图浏览显示的都是第一次打开文章时的图片
uni-app uni-cms-article组件在小程序、App大图浏览存在问题 每次大图浏览显示的都是第一次打开文章时的图片
操作步骤:
uni-cms-article在小程序、App大图浏览有问题H5网页却好着,每次大图浏览都是第一次打开的文章的图片,要想大图浏览后面文章的图片,必须把后台进程关掉,把App、小程序彻底退出,再次进入,才能大图浏览浏览后面文章里的图片
预期结果:
uni-cms-article在小程序、App大图浏览有问题H5网页却好着,每次大图浏览都是第一次打开的文章的图片,要想大图浏览后面文章的图片,必须把后台进程关掉,把App、小程序彻底退出,再次进入,才能大图浏览浏览后面文章里的图片
实际结果:
uni-cms-article在小程序、App大图浏览有问题H5网页却好着,每次大图浏览都是第一次打开的文章的图片,要想大图浏览后面文章的图片,必须把后台进程关掉,把App、小程序彻底退出,再次进入,才能大图浏览浏览后面文章里的图片
bug描述:
uni-cms-article在小程序、App大图浏览有问题,H5网页却好着,每次大图浏览都是第一次打开的文章的图片,要想大图浏览后面文章的图片,必须把后台进程关掉,把App、小程序彻底退出,再次进入,才能大图浏览浏览后面文章里的图片
信息类别 | 信息内容 |
---|---|
产品分类 | uniapp/App |
PC开发环境操作系统 | Windows |
PC开发环境操作系统版本号 | windows12 |
HBuilderX类型 | 正式 |
HBuilderX版本号 | 3.99 |
手机系统 | Android |
手机系统版本号 | Android 14 |
手机厂商 | 华为 |
手机机型 | 荣耀V30 |
页面类型 | vue |
vue版本 | vue2 |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
我试了下,没有复现你说的问题,你的uni-cms-article插件版本号是多少呢?
可能是我没有描述清楚。 复现步骤: 1、先随机打开一篇有图片的文章,然后点击图片,进入大图浏览模式; 2、退出大图浏览模式,退出这篇文章; 3、再打开其他文章进入大图浏览模式,后面的文章的大图浏览都是第一次打开的文章里的图片。 一直都是第一次打开的文章的图片,导致后面的图片,长按无法保存、分享等
微信小程序、打包成App有这个问题,网页上却好着。
回复 开发者在线App: 我按照你说的重新试了下,还是没有复现这个问题。
回复 DCloud_uniCloud_CRL: 您是在开发环境里测试的还是什么,可能是微信的真实环境与开发环境有差异,需要找个真实的已经在微信发布上线的小程序查看。
在使用 uni-app
的 uni-cms-article
组件时,如果在小程序或 App 中遇到大图浏览时总是显示第一次打开文章时的图片,可能是由于以下原因导致的:
1. 图片缓存问题
小程序或 App 可能会缓存图片,导致每次打开大图浏览时显示的是缓存的图片,而不是最新的图片。
解决方案:
- 在图片 URL 后添加时间戳或随机参数,强制浏览器或小程序重新加载图片。例如:
这样可以确保每次打开大图浏览时,图片 URL 都是唯一的,从而避免缓存问题。<image :src="imageUrl + '?timestamp=' + new Date().getTime()"></image>
2. 组件状态未更新
uni-cms-article
组件可能没有正确更新图片列表或当前显示的图片索引,导致每次打开大图浏览时显示的是第一次的图片。
解决方案:
- 确保在每次打开文章时,正确更新
uni-cms-article
组件的图片列表和当前显示的图片索引。例如:
确保在每次打开文章时,调用相关的方法来更新组件的状态。this.$refs.articleComponent.updateImageList(newImageList); this.$refs.articleComponent.setCurrentImageIndex(newIndex);
3. 组件内部逻辑问题
uni-cms-article
组件内部可能存在逻辑问题,导致每次打开大图浏览时显示的是第一次的图片。
解决方案:
- 检查
uni-cms-article
组件的源码,确保在每次打开大图浏览时,组件内部正确更新了当前显示的图片。如果发现问题,可以尝试修改组件源码或向uni-app
官方提交 issue。
4. 小程序或 App 的 API 调用问题
在小程序或 App 中,大图浏览可能依赖于特定的 API 调用,如果 API 调用不正确,可能会导致图片显示问题。
解决方案:
- 确保在小程序或 App 中正确调用大图浏览的 API,并传递正确的图片列表和当前图片索引。例如,在小程序中使用
wx.previewImage
API:
确保每次打开大图浏览时,wx.previewImage({ current: currentImageUrl, urls: imageList });
current
和urls
参数都是最新的。
5. 数据绑定问题
如果图片列表或当前图片索引是通过数据绑定传递的,确保数据绑定的值在每次打开文章时都正确更新。
解决方案:
- 检查数据绑定的值,确保在每次打开文章时,图片列表和当前图片索引都正确更新。例如:
this.imageList = newImageList; this.currentImageIndex = newIndex;