好高深的问题,同求答案~
在scroll-view中使用mp-uploader点击图片预览,IOS真机模拟,图片为什么被遮挡?在scroll-view中使用we-ui的mp-uploader图片上传组件,点击图片放大预览之后,在安卓真机下是正常的,但是在IOS真机模拟中,scroll-view之外的东西会遮挡住放大的图片。 在网上找到we-ui的源码,mp-uploader中关于图片放大的操作是通过 wx.previewImage 实现的。之后我在 scroll-view 中只是简单的实现 wx.previewImage 的相关功能,发现是没有问题的,所以应该就是 we-ui 的 mp-uploader 组件出现了这个问题,所以我该怎么解决? 真机截图效果如下所示: 三张图片依次为:微信开发者工具、安卓真机(华为Mate40)、IOS真机(iPhone7)。可以看到,在IOS中,放大预览的一部分,被 scroll-view 外的按钮遮挡了。 [图片][图片][图片] 接下来是代码: wxml: <view class="scroll-container"> <scroll-view style="height: 100%;" scroll-y="{{true}}"> <mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" binddelete="deleteImage" upload="{{uplaodFile}}" files="{{files}}" max-count="3" title="凭证上传" tips="在此上传图片,最多可以上传三张"></mp-uploader> </scroll-view> </view> <view class="btn-class"> <button>这是一个占位按钮</button> </view> wxss: .scroll-container { height: calc(100vh - 130rpx); } .btn-class { height: 130rpx; width: 100%; } js(这段代码实现不了上传图片功能,只是为了能看到放大预览的图片): Page({ /** * 页面的初始数据 */ data: { }, uploadError(e) { console.log('upload error', e.detail) }, uploadSuccess(e) { console.log('upload success', e.detail) }, selectFile(files) { console.log('selectFile', files) }, uplaodFile(files) { console.log('uplaodFile', files) }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { this.setData({ selectFile: this.selectFile.bind(this), uplaodFile: this.uplaodFile.bind(this) }) }, });
2022-08-30