通过在onMounted获取movable-area与movable-view实例，计算出可滑动的距离
效果图：
代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | »Slide to grab orderimport { 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; // 可选择让滑块复位};.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; } } } |
到此这篇关于基于uniapp vue3 的滑动抢单组件的文章就介绍到这了,更多相关uniapp vue3滑动抢单内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
