文章介绍了如何在Vue组件的onMounted生命周期钩子中获取movable-area和movable-view组件的实例,从而计算出可滑动的距离,示例代码展示了这一过程,感兴趣的朋友跟随小编一起看看吧
**
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用！
【 如果你想靠AI翻身，你先需要一个靠谱的工具！ 】
通过在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滑动抢单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家
