You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
2.9 KiB
122 lines
2.9 KiB
<template>
|
|
<view class="half-screen">
|
|
<!--屏幕背景变暗的背景 -->
|
|
<view class="background_screen" @tap="hideModal" v-if="showModalStatus"></view>
|
|
<!--弹出框 -->
|
|
<scroll-view scroll-y :animation="animationData" class="attr_box boxClass" v-if="showModalStatus">
|
|
<slot />
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
//弹窗显示控制
|
|
showModalStatus: false,
|
|
|
|
animationData: ''
|
|
};
|
|
},
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: '标题'
|
|
}
|
|
},
|
|
externalClasses: ['boxClass'],
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
//点击显示底部弹出
|
|
changeRange: function () {
|
|
this.showModal();
|
|
},
|
|
|
|
onClose() {
|
|
this.hideModal();
|
|
},
|
|
|
|
//底部弹出框
|
|
showModal: function () {
|
|
// 背景遮罩层
|
|
var animation = uni.createAnimation({
|
|
duration: 200,
|
|
timingFunction: 'linear',
|
|
delay: 0
|
|
}); //this.animation = animation
|
|
|
|
animation.translateY(300).step();
|
|
this.setData({
|
|
animationData: animation.export(),
|
|
showModalStatus: true
|
|
});
|
|
setTimeout(
|
|
function () {
|
|
animation.translateY(0).step();
|
|
this.setData({
|
|
animationData: animation.export()
|
|
});
|
|
}.bind(this),
|
|
200
|
|
);
|
|
},
|
|
//点击背景面任意一处时，弹出框隐藏
|
|
hideModal: function () {
|
|
//弹出框消失动画
|
|
var animation = uni.createAnimation({
|
|
duration: 200,
|
|
timingFunction: 'linear',
|
|
delay: 0
|
|
}); //this.animation = animation
|
|
|
|
animation.translateY(300).step();
|
|
this.setData({
|
|
animationData: animation.export()
|
|
});
|
|
setTimeout(
|
|
function () {
|
|
animation.translateY(0).step();
|
|
this.setData({
|
|
animationData: animation.export(),
|
|
showModalStatus: false
|
|
});
|
|
}.bind(this),
|
|
200
|
|
);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
/*使屏幕变暗 */
|
|
.background_screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background: #000;
|
|
opacity: 0.2;
|
|
overflow: hidden;
|
|
z-index: 1000;
|
|
color: #fff;
|
|
}
|
|
/*对话框 */
|
|
.attr_box {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 2000;
|
|
background: #fff;
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
}
|
|
</style>
|