快捷導(dǎo)航

基于uniapp?vue3?的滑動搶單組件實(shí)例代碼

更新時間：2025年02月11日 09:35:30 作者：printf_824

文章介紹了如何在Vue組件的`onMounted`生命周期鉤子中獲取`movable-area`和`movable-view`組件的實(shí)例,從而計(jì)算出可滑動的距離,示例代碼展示了這一過程,感興趣的朋友跟隨小編一起看看吧

通過在onMounted獲取movable-area與movable-view實(shí)例，計(jì)算出可滑動的距離

效果圖：

代碼：

<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(); // 組件加載后計(jì)算最大可滑動距離
});
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("動態(tài)計(jì)算 maxX:", maxX.value);
          }
        })
        .exec();
    })
    .exec();
};
const onSliderChange = (event) => {
  const x = event.detail.x;
  console.log("當(dāng)前滑動位置:", x);
  if (x >= maxX.value) {
    console.log("滑到了最右邊");
    onSliderEnd();
  }
};
const onSliderEnd = () => {
  console.log("滑動結(jié)束，執(zhí)行邏輯...");
  sliderX.value = 0; // 可選擇讓滑塊復(fù)位
};
</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>

到此這篇關(guān)于基于uniapp vue3 的滑動搶單組件的文章就介紹到這了,更多相關(guān)uniapp vue3滑動搶單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: