文章介绍了如何在Vue组件的`onMounted`生命周期钩子中获取`movable-area`和`movable-view`组件的实例,从而计算出可滑动的距离,示例代码展示了这一过程,感兴趣的朋友跟随小编一起看看吧
通过在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>
