image.png
image.png
<!-- 我的抽屜 -->
<template>
<view>
<movable-area class="move-content" @touchmove.stop>
<movable-view
class="move-incontent"
:style="'height:' + movableHeight + 'rpx'"
:y="initY"
inertia
:damping="20"
:friction="1"
direction="vertical"
:animation="true"
@change="movableChange"
@touchend="touchEnd"
>
<slot></slot>
</movable-view>
</movable-area>
</view>
</template>
<script setup>
onBeforeMount(() => {});
const movableHeight = ref(1280); //滾動塊高度
const windowHeight = ref(0); //窗口高度
const initY = ref(0); //定義y軸方向的偏移
const dragY = ref(0); //儲存滑動距離
onMounted(() => {
windowHeight.value = uni.getSystemInfoSync().windowHeight;
movableHeight.value = (windowHeight.value - 172) * 2;
});
// S 移動拖拽
const movableChange = e => {
let y = e.detail.y;
dragY.value = y;
};
//觸摸結(jié)束
const touchEnd = e => {
initY.value = dragY.value; //這行必寫 不然無法自動滑動到頂部或者底部
setTimeout(() => {
if (dragY.value > -350) { //結(jié)束時判斷在一定高度內(nèi)滑回去或者滑全屏
initY.value = 0;
} else {
initY.value = -(windowHeight.value - 172);
}
});
};
</script>
<style lang='scss' scoped>
// S 滑動塊
.move-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 172rpx; //盒子的大小限制會可移動范圍
.move-incontent {
width: 100%;
background-color: #fff;
}
}
</style>
