微信小程序,在scroll-view中使用mp-uploader点击图片预览,IOS真机模拟,图片为什么被遮挡?

scroll-view 中使用 we-uimp-uploader 图片上传组件,点击图片放大预览之后,在安卓真机下是正常的,但是在IOS真机模拟中,scroll-view 之外的东西会遮挡住放大的图片。
在网上找到 we-ui 的源码,mp-uploader 中关于图片放大的操作是通过 wx.previewImage 实现的。之后我在 scroll-view 中只是简单的实现 wx.previewImage 的相关功能,发现是没有问题的,所以应该就是 we-uimp-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)
    })
  },
});
阅读 1.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题