在用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>