<template>
  <view>
    <view class="popup_box" id="popup_box" :animation="animationData" :style="[positionStyle]" @touchstart="start" @touchmove.stop.prevent="move" @touchend="end" >
        <!-- <button @click="hidden">隐藏</button> -->
    </view>
  </view>
</template>

<script>
export default {
  data(){
    return {
      f_info:{},
      clientYStart:0,
      clientYEnd:0,
      positionStyle: {
				'--position-top': 0
			},
      animation:'',
      animationData: {},
    }
  },
  mounted() {
    this.animation = uni.createAnimation()
    const query = uni.createSelectorQuery().in(this);
    query.select('#popup_box').boundingClientRect(data => {
    	this.f_info = data;
      console.log(data)
    }).exec();
  },
  methods:{
    hidden(){
      console.log(123)
    },
    start(e) {
      this.clientYStart = e.changedTouches[0].clientY
    },
    move(e) {
      this.clientYEnd = e.changedTouches[0].clientY;
			const val = parseInt((this.clientYStart-this.clientYEnd))
			this.positionStyle['--position-top'] = -val+'rpx'

    },
    end(e) {
			this.clientYEnd = e.changedTouches[0].clientY;
			const val = parseInt((this.clientYStart-this.clientYEnd))
			console.log(val)
			if(val<-300){
				console.log('滑动了：'+val + ',关闭')
			}else{
				console.log('滑动了：'+val + ',回到顶部')
				this.positionStyle['--position-top'] = 0+'rpx'
			}
    }
  }
}
</script>

<style lang="scss" scoped>
.popup_box {
    border: 1px solid gray;
    height: 94vh;
    position: fixed;
    bottom: 0rpx;
    width: 100%;
    z-index: 10079;
    background: red;
    transform:  translateY(var(--position-top));
}
</style>