uni-app开发微信小程序端时，使用u-view的u-overlay时，插入自定义组件获取uni.createSelectorQuery().in(this)时位置数据为0的坑

故都的秋.

已于 2024-02-27 01:55:09 修改

阅读量858

点赞数 4

CC 4.0 BY-SA版权

文章标签： uni-app 微信小程序小程序

于 2024-02-27 01:17:13 首次发布

本文链接：https://blog.youkuaiyun.com/m0_74295896/article/details/136311706

开发者在使用uniapp开发时遇到遮罩层与滑动选择器交互的问题，发现微信小程序在页面加载时组件未完全渲染导致数据获取失败。解决方法是将遮罩层的显示条件加到滑动组件上，以适应不同环境的渲染差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在用uniapp做项目的时候有一个需求，点击按钮出现遮罩层，纵向的滑动选择器出现，可以通过滑动获取数值。遮罩层使用了u-view的u-overlay组件。自定义滑动选择器内部使用了movable-area和movable-view组件，结合uni.createSelectorQuery().in(this)来获取高度宽度位置来计算出数值，在组件挂载的时候需要调用以获取初始坐标。出现了一个bug，在H5端可以正常获取到坐标，微信小程序测试时即使是用延时器执行，或者在onReady生命周期中执行，用this.$nextTick()依然获取不到，也尝试用$refs获取组件信息都不好解决，百思不得其解，最后发现H5端在页面初次渲染时组件并未挂载，打开u-overlay时才会挂载。而在微信小程序端页面打开的时候就已经挂载了，此时组件尚未渲染，故所有数据都是0。解决问题只需要用v-if把遮罩层的条件加到滑动组件上。u-overlay在h5和微信小程序的渲染差异在u-view官方并没给出解释。 js和模板代码如下：

mounted() {
				this.selectorQuery();
		},
methods: {
			selectorQuery() {
				const that = this;
				const query = uni.createSelectorQuery().in(this);
				query.select('#movable_area').boundingClientRect(data => {
					console.log(data, 'data')
					that.width = that.vertical ? data.height : data.width; //这里判断是横向slider还是竖向
					that.right = `${that.width-(this.blockSize/2)}px`;
					const shift = +(((that.val - that.min) / (this.max - this.min)) * (that.width - this
						.blockSize)).toFixed(1);
					that.x = that.vertical ? 0 : shift;
					that.y = that.vertical ? that.width - shift : 0;
					this.setVal(shift);
				}).exec();
			},
}

<template>
	<view class="slider" :style="sliderStyle">
		<view class="val" v-if="showValue" :style="showValueStyle">{{val < max ? val : 'ALL IN'}}</view>
		<movable-area class="movable-area" :style="areaStyle" id="movable_area">
			<view class="block" :style="blockStyle"></view>
			<view class="active" :style="activeStyle"></view>
			<movable-view class="movable-view" :x="x" :y="y" :disabled="disabled" :animation="false" direction="all"
				@change="onChange" @touchend="touchend"
				:style="{width:`${blockSize}px`,height:`${blockSize}px`,background:`${blockColor}`}">
			</movable-view>
		</movable-area>
		<view class="beUpBet" @tap="BeUpBetConfirm">
			确定
		</view>
	</view>
</template>

<u-overlay :show="beUpBetSlider" opacity="0.5"  @click="beUpBetSlider = false">
				<view class="upBetSlider" v-if="beUpBetSlider">
					<pp-slider
					       :min="min"
						   :max="max"
					       :vertical="true" 
					       :show-value="true" 
					       :value="0" 
						   blockColor='#066acc'
						   backgroundColor="radial-gradient(circle at 15px 15px, #ffff00,#066acc)"
						   activeColor="radial-gradient(circle at 15px 15px, #aa0000,#2cb4fe)"
					       :block-size="25" 
					       :disabled="false"
					       @BeUpBetConfirm="anteConfirm" />
				</view>
		</u-overlay>