用了uniapp nvue上你会发现图片的高度无法自适应,只能使用api提供的 mode这几个东西,也不支持css width:100%,写死又可以,开发写死就不对了,通过高度计算修改图片样式

1、看到:style,用过vue的都知道这个是改样式的

<image ref='dd' class="directory_bg" src="../../static/image/directory/directory_bg.png" :style="imageBgStyle" />

data(){
	return {
		imageBgStyle:{
			width:'0',
			height:"0",
			marginTop:"0px",
		}
	}
}

2、根据这个公式计算

(2000*320)/750 (图片的高度 * 屏幕宽度) / 图片实际宽度
我们需要获取图片的信息,里面包含了图片实际的宽高,就是文件夹右击图片获取的图片信息
uniapp 获取图片信息api
uni.getImageInfo(OBJECT) 这个object的参数就是文档的,这个参数是object,全是大写的的obj看的是有点懵逼的
*
*
同过 获取系统信息同步接口 获取屏幕的高度

代码示例:

uni.getImageInfo({
	src: "/static/image/directory/directory_bg.png",
	success(res) {
		console.log(res)
	},
	fail(){
	}
})

3、开始计算

有图片信息有屏幕信息开始计算



uni.getImageInfo({
	src: "/static/image/directory/directory_bg.png",
	success(res) {
		const getSystemInfo = uni.getSystemInfoSync()
		const {windowWidth, windowHeight} = getSystemInfo; //屏幕可视宽高
		const {width, height} = res; // 图片信息的实际宽高
		let imageAdapt = (height * windowWidth) / width; //计算根据宽度的自适应的高度
					
		//设置图片样式
		_than.imageBgStyle.width = `${windowWidth}px`;
		_than.imageBgStyle.height = `${imageAdapt}px`;
	},
	fail(){
	}
})
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐