关于uniapp中长图片父盒子宽度自适应的需求实现

先说结论:

绑定图片加载函数获得每张图片的宽高,然后通过屏幕大小和图片大小等比例缩放,计算得出每张图片的宽度:每张图所需宽度= 图片真实宽度/(图片真实高度/屏幕高度)

父盒子把每张图宽度相加,然后监听窗口的resize,重新赋值给父盒子宽度就行。

(代码直接看下面第三点)

1、需求

我要实现不同长度的图片拼接成一个连续的长图,就是高度不变,可以横向滚动的图片。

2、实现

首先我以为设定了图片height:100vh就好了,然后图片宽度可以自己进行自适应。然而,运行后的uni-image的css自带了320px宽度属性。导致我每个图片渲染出来都是一样宽的。

//imgArr是图片的地址数组
<image v-for="(item,index) in imgArr" :src="item" :key="index"></image>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值