IT俱乐部 JavaScript 基于uniapp vue3 的滑动抢单组件实例代码

基于uniapp vue3 的滑动抢单组件实例代码

通过在onMounted获取movable-area与movable-view实例,计算出可滑动的距离

效果图:

代码:

»Slide to grab order
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; // 可选择让滑块复位
};

.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俱乐部!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/14621.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部