uni-app:获取元素宽高

效果

uni-app:获取元素宽高_第1张图片

代码

这里我定义的宽为500px,高为200排序,控制台输出的结果是502,202。原因是我设置了上下左右宽度各为1px的border边框导致

核心代码分析

// const query = uni.createSelectorQuery();表示创建了一个选择器查询实例。通过这个实例,你可以使用不同的方法来选择页面中的 DOM 元素,并执行一系列操作,比如获取节点信息、监听节点属性变化等。
const query = uni.createSelectorQuery();
//选择id为mybox的元素节点。
query.select('#mybox').fields({
 
   //指定要获取的属性,这里设置为size: true表示要获取尺寸信息。
    size: true,
 
   //在回调函数(res) => {...}中处理查询结果。回调函数会接收一个res参数,其中包含了查询的结果信息。
}, (res) => {
 
   // 在回调函数中,通过res.width和res.height获取到查询元素的宽度和高度。
    const width = res.width;
    const height = res.height;
    console.log(width)
    console.log(height)
}).exec();




注:如果获取到宽高之后还有别的操作,建议放在回调函数中进行,否则可能出现先执行别的操作,再成功获取宽高的问题

例如:下面的例子便是在回调函数中使用画布方法

//创建一个画布上下文对象,用于进行绘图操作。'firstCanvas'是一个指定的画布标识符,表示在页面上的哪个  元素上进行绘制。
var context = uni.createCanvasContext('firstCanvas')
var width = '';
const query = uni.createSelectorQuery();
//获取宽度
query.select('#firstCanvas').fields({
	size: true
}, (res) => {
	width = res.width;
	//获取到宽度进行绘制
	//绘制路径中的线条。
	context.setStrokeStyle("#aaaaff")
	// 设置线条的宽度为2个像素。
	context.setLineWidth(2)
	// 绘制横线
	context.beginPath(); // 开始路径绘制
	context.moveTo(width / 2, 0); // 将起点移动到 (0, 100)
	context.lineTo(width / 2, 50);
	context.stroke(); // 绘制线条
	var x1 = width / 4; // 第一个竖线的起点 x 坐标
	var y1 = 50; // 第一个竖线的起点 y 坐标
	var y2 = 30; // 短竖线的高度
	var horizontalLength = width / 2; // 横线的长度
	context.beginPath();
	context.moveTo(x1, y1 + y2); // 移动到第一个短竖线的起点
	context.lineTo(x1, y1); // 绘制第一个短竖线
	context.moveTo(x1 + horizontalLength, y1 + y2); // 移动到横线的右端下方
	context.lineTo(x1 + horizontalLength, y1); // 绘制第二个短竖线
	context.moveTo(x1, y1); // 移动到横线的左端下方
	context.lineTo(x1 + horizontalLength, y1); // 绘制横线/*  */
	context.stroke(); // 绘制线条
	// 将之前的绘图操作渲染到画布上。
	context.draw()
}).exec();

你可能感兴趣的:(uni-app,uni-app,javascript,前端)