7***@qq.com
7***@qq.com
  • 发布:2020-12-10 09:07
  • 更新:2020-12-10 09:10
  • 阅读:2662

【不是Bug】uniapp image组件,widthFix 模式下,图片之间有空白缝隙

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.9.11

手机系统: iOS

手机系统版本号: IOS 14

手机厂商: 苹果

手机机型: ip7 plus

页面类型: vue

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
              <view style="background-color: #CB051A;margin: 0;padding: 0;">  
            <image style="width: 100%; margin: 0;padding: 0;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
            <image style="width: 100%; margin: 0;padding: 0;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
            <image style="width: 100%;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
            <image style="width: 100%;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
        </view>

操作步骤:
              <view style="background-color: #CB051A;margin: 0;padding: 0;">  
            <image style="width: 100%; margin: 0;padding: 0;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
            <image style="width: 100%; margin: 0;padding: 0;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
            <image style="width: 100%;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
            <image style="width: 100%;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
        </view>

预期结果:

图片之间不应该有缝隙

实际结果:

图片直接有缝隙

bug描述:

uniapp image组件,widthFix 模式下,图片之间有空白缝隙,复现代码如下,复现图片在附件。

              <view style="background-color: #CB051A;margin: 0;padding: 0;">  
            <image style="width: 100%; margin: 0;padding: 0;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
            <image style="width: 100%; margin: 0;padding: 0;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
            <image style="width: 100%;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
            <image style="width: 100%;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
        </view>
2020-12-10 09:07 负责人:无 分享
已邀请:
uniapp追随者

uniapp追随者

外层加个 flex布局看看

chenli

chenli

使用flexbox布局看一下

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

    谢谢,加上flex可以了,没搞明白原理。

    2020-12-10 09:15

要回复问题请先登录注册