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

先说结论：

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

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

（代码直接看下面第三点）

1、需求

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

2、实现

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

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

假如要改变图片宽度只能自己给定宽度才行，做不到自适应。

然后我在代码中将image标签的mode模式改成“heightFix”，实现图片高度自适应，每张图片宽度也可以渲染成想要的宽度了。但是没能在一行显示。

<image mode="heightFix" :ref="'img'+index" v-for="(item,index) in imgArr":src="item" :key="'img'+index">
</image>

但是我的父盒子需要设定一个宽度，才能将图片都放一起并展示。（这是我的笨方法，你杠就是你对）所以我要拿到每个图片的宽度相加给父盒子才行。但是上面图片渲染成想要的宽度的时候，通过ref绑定image标签获得图片的宽度那是拿不到的，即使console.log(this.$ref.我的image)已经看到了这个渲染的宽度，但是在mounted生命周期或者调用的方法中还是只能拿到宽度为320。所以我只能换一种方式拿宽度。

3、求每个图片的宽度

所以我绑定图片的加载函数，拿到加载时每张图片的宽高（就是图片原始的宽高），然后获取设备的宽高，然后因为所需高度与屏幕高度相同，根据同比例缩放的方式获取所需展示的宽度。

<view class="bg-img" id="bgImg"  :style="'width:'+allW+'px;" ref="bgImg"><image @load="imgLoading" mode="heightFix" :ref="'img'+index" v-for="(item,index) in imgArr" :src="item" :key="'img'+index"></image>
</view>

data() {return {imgArr:['../img/pic1.jpg','../img/pic2.jpg']// 背景总宽度allW: 0,// 图片宽高eachW: [],eachH: [],// 设备当下宽高view_width: 0,view_height: 0,}},

 methods: {imgLoading: function(e) {var imgW = e.detail.widthvar imgH = e.detail.heightthis.eachH.push(imgH)this.eachW.push(imgW)this.renderResize()},// 判断横竖屏,修改背景宽度 renderResize() {var _this = this_this.allW = 0this.$nextTick(function() {// 获取屏幕宽高uni.getSystemInfo({success: function(res) {_this.view_width = res.windowWidth_this.view_height = res.windowHeightlet addMore=parseInt( _this.view_width/_this.view_height)let w = 0for (let i = 0; i < _this.eachW.length; i++) {// 每张图所需宽度= 图片真实宽度/(图片真实高度/屏幕高度) let num=(_this.eachH[i] / _this.view_height).toFixed(5)w = _this.eachW[i] / num_this.allW += w//总背景宽度累加}}})})}},mounted() {// 监听 resize 方法window.addEventListener("resize", this.renderResize, false)this.renderResize()},beforeDestroy() {// 移除监听window.removeEventListener("resize", this.renderResize, false)},

4、结果

但是通过这种方式计算的宽度因为小数点的问题，导致计算出来的宽度跟渲染的图片宽度有一点点误差，但是我没找到根源，所以自己加了一点，有找到的朋友可以指出，谢谢。

渲染的时候可以看见图片的宽度，然后可以跟计算的结果比对一下。

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

Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法
Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...
echarts基于父盒子达成自适应布局（大数据可视化页面必须！）
echarts基于父盒子达成自适应布局(大数据可视化页面必须!) 创建一个最外层容器内部嵌套echarts容器 <div class="container"> < ...
多重盒子嵌套下，子盒子撑开父盒子，父盒子宽度随子盒子内容自适应
先看默认状态下的效果: 块级元素高度被内容撑开,宽度默认为父级100%(这里父级为浏览器大小) 行内元素的宽高都由内容撑开我们的需求是:让块级父盒子的宽度由子盒子撑开结论:把需要自适应的那层父盒子 ...
大小不一样的图片随着盒子大小自适应
前提:vue+iview做后台管理系统需求:页面一行有固定的4张卡片,每张卡片里有图片,图片是从后台系统中上传的,大小不固定,要卡片中的图片高度随着屏幕大小自适应小屏幕效果: 大屏幕效果: 解决方 ...
H5图片高度根据宽度自适应
每个图片原始宽高不一样,缩小每个图片到指定的宽度,高度等比例缩小,实现图片高度自适应. 下面看看实现代码: 下面是uniapp的条件编译,如果是小程序场景就使用 mode 属性实现高度自适应,如果是H ...
vue图片宽高自适应_div或img图片高度随宽度自适应的方法
该方法主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面滚动. 一.可以使用js判断图片的宽度得到具体数值之后,再来利用js设置图片的高度(这里就不具体为大家细说了). 利用j ...
iOS固定图片高度，宽度自适应缩放
当后台返回一张图片,但没有返回图片宽高尺寸时,需要我们 APP 来处理自适应显示. 1.首页我们可以在图片下载完的回调里,计算宽高,然后自己计算比例进行缩放. 2.如果是图片是显示在 tablevie ...
html 图片高度页面高度自适应,怎样让网页图片高度自适应宽度
[摘要] 你肯定知道width百分比可以实现图片宽度的自适应,那么你知道高度也可以根据宽度变话而自适应比变化么,看下本文就了解了! 当前响应式布局,内容尺寸自适应设备是众多网站开发者的选择,毕竟现在显 ...
让子盒子在父盒子中垂直居中的七个方法
一.用padding实现 1.padding-top = (父盒子的高度 - 子盒子的高度) / 2 2.padding-left = (父盒子的宽度 - 子盒子的宽度) / 2 3.由于paddin ...

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

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

最新文章

热门文章