我要评论通过在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>
到此这篇关于基于uniapp vue3 的滑动抢单组件的文章就介绍到这了,更多相关uniapp vue3滑动抢单内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论