基于uniapp vue3 的滑动抢单组件实例代码
文章介绍了如何在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>

到此这篇关于基于uniapp vue3 的滑动抢单组件的文章就介绍到这了,