70 lines
1.1 KiB
Vue
70 lines
1.1 KiB
Vue
<template>
|
|
<scroll-view :scroll-y="true" :scroll-top='scrolltop' class="pageanimation" :class="{showon:showis,hideon:!Props.modelValue}">
|
|
<slot></slot>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
onBackPress
|
|
} from "@dcloudio/uni-app"
|
|
import {
|
|
nextTick,
|
|
ref,
|
|
watch
|
|
} from "vue"
|
|
const scrolltop=ref(0)
|
|
const showis=ref(false)
|
|
const Emits = defineEmits(["update:modelValue","close"])
|
|
const Props = defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
watch(() => Props.modelValue, () => {
|
|
|
|
|
|
if(Props.modelValue){
|
|
showis.value=true;
|
|
}else{
|
|
Emits("close")
|
|
setTimeout(()=>{
|
|
showis.value=false;
|
|
scrolltop.value=100;
|
|
nextTick(()=>{
|
|
scrolltop.value=0;
|
|
})
|
|
},500)
|
|
}
|
|
})
|
|
onBackPress(() => {
|
|
if (Props.modelValue) {
|
|
Props.modelValue=false;
|
|
|
|
Emits("update:modelValue",false)
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.pageanimation{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100vh;
|
|
top: 0px;
|
|
left: 100%;
|
|
background: #E7E7ED;
|
|
transition:0.3s;
|
|
&.showon{
|
|
left: 0%;
|
|
}
|
|
&.hideon{
|
|
left: 100%;
|
|
}
|
|
}
|
|
</style> |