通过在onMounted获取movable-area与movable-view实例，计算出可滑动的距离
效果图：
代码：
<template><view class="slider-container"><movable-area class="movable-area" id="movableArea"><movable-view class="slider-button"direction="horizontal":x="sliderX"@change="onSliderChange"@touchend="onSliderEnd"id="movableView"><text class="arrow-icon">»</text><text>Slide to grab order</text></movable-view></movable-area></view>
</template><script setup>
import { ref, onMounted } from "vue";const sliderX = ref(0); // 滑块 X 轴位置
const maxX = ref(0); // 最大可滑动距离onMounted(() => {getMaxX(); // 组件加载后计算最大可滑动距离
});const getMaxX = () => {uni.createSelectorQuery().select("#movableArea").boundingClientRect(areaRect => {uni.createSelectorQuery().select("#movableView").boundingClientRect(viewRect => {if (areaRect && viewRect) {maxX.value = areaRect.width - viewRect.width;console.log("动态计算 maxX:", maxX.value);}}).exec();}).exec();
};const onSliderChange = (event) => {const x = event.detail.x;console.log("当前滑动位置:", x);if (x >= maxX.value) {console.log("滑到了最右边");onSliderEnd();}
};const onSliderEnd = () => {console.log("滑动结束，执行逻辑...");sliderX.value = 0; // 可选择让滑块复位
};
</script><style>
.slider-container {position: relative;width: 100%;height: 88rpx;margin-top: 30rpx;background-color: #F0F0F0;border-radius: 8rpx;overflow: hidden;movable-area {width: 100%;height: 100%;background: linear-gradient(90deg, #4080FF 0%, #4080FF 100%);}.slider-button {width: 300rpx;height: 88rpx;background-color: #4080FF;border-radius: 8rpx;display: flex;align-items: center;justify-content: center;color: #ffffff;font-size: 28rpx;z-index: 1;.arrow-icon {margin-right: 10rpx;font-size: 32rpx;}}}
</style>
