1***@qq.com
1***@qq.com
  • 发布:2023-05-31 18:33
  • 更新:2023-06-02 15:14
  • 阅读:462

【报Bug】movable-area 组件放大图片,在ios下十分模糊,但是安卓就十分清晰,请问如何解决这个问题呢

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 家庭中文版

HBuilderX类型: Alpha

HBuilderX版本号: 3.8.1

第三方开发者工具版本号: 1.06.2210310

基础库版本号: 2.30.3

项目创建方式: HBuilderX

示例代码:
<template>  
  <view >  
    <movable-area scale-area :style="{height: imgHeight+'px'}">  
      <movable-view direction="all"  scale scale-min="1" scale-max="10" :out-of-bounds="true" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}">  
        <scroll-view class="scroll-view_H" scroll-x="true"   scroll-anchoring="true" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}">  
          <view class="cover-img cover-img-right" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}">  
            <image src="https://cdn.zailianclub.com//article/78a8f61f-5cf1-07f7-79b3-117ecaaf3c35.jpg" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}" @load="onImageLoad" mode="heightFix"></image>  
          </view>  
        </scroll-view>  
      </movable-view>  
    </movable-area>  
  </view>  
</template>  
<script>  

export default {  
  data(){  
    return {  
      imgHeight: '600',  
      imgScorllWidth: ''  
    }  
  },  
  methods:{  
    onImageLoad: function(e){  
      let oImgW = e.detail.width; //图片原始宽度  
      let oImgH = e.detail.height; //图片原始高度  
      this.imgScorllWidth = oImgW / oImgH * this.imgHeight;  
    },  
  }  

}  
</script>  
<style lang="scss" scoped>  
movable-view {  
  display: flex;  
  justify-content: center;  
  width: 100%;  
  height:100%;  
}  

movable-area {  
  height: 100%;  
  width: 100%;  
  position:fixed;  
  overflow: hidden;  
}  
</style>

操作步骤:
<template>  
  <view >  
    <movable-area scale-area :style="{height: imgHeight+'px'}">  
      <movable-view direction="all"  scale scale-min="1" scale-max="10" :out-of-bounds="true" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}">  
        <scroll-view class="scroll-view_H" scroll-x="true"   scroll-anchoring="true" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}">  
          <view class="cover-img cover-img-right" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}">  
            <image src="https://cdn.zailianclub.com//article/78a8f61f-5cf1-07f7-79b3-117ecaaf3c35.jpg" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}" @load="onImageLoad" mode="heightFix"></image>  
          </view>  
        </scroll-view>  
      </movable-view>  
    </movable-area>  
  </view>  
</template>  
<script>  

export default {  
  data(){  
    return {  
      imgHeight: '600',  
      imgScorllWidth: ''  
    }  
  },  
  methods:{  
    onImageLoad: function(e){  
      let oImgW = e.detail.width; //图片原始宽度  
      let oImgH = e.detail.height; //图片原始高度  
      this.imgScorllWidth = oImgW / oImgH * this.imgHeight;  
    },  
  }  

}  
</script>  
<style lang="scss" scoped>  
movable-view {  
  display: flex;  
  justify-content: center;  
  width: 100%;  
  height:100%;  
}  

movable-area {  
  height: 100%;  
  width: 100%;  
  position:fixed;  
  overflow: hidden;  
}  
</style>

预期结果:

期望movable-area组件中的图片在ios中也能清晰放大

实际结果:

期望movable-area组件中的图片在ios放大十分模糊

bug描述:

movable-area 组件中的图片,在ios放大十分模糊,但是安卓手机上就非常清晰甚至能看清图片的纹理,对比非常明显,我将对比图放在附件中。也可运行我的代码示例,对bug进行复现。

2023-05-31 18:33 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

应该是微信的iOS和安卓底层实现方式不同导致,反馈到微信小程序社区。

要回复问题请先登录注册