|
@@ -0,0 +1,205 @@
|
|
|
+<template>
|
|
|
+ <view class="site-box" ref="fixbox" :style="{ 'z-index':zIndex , 'height':popupHeight + 'px'}">
|
|
|
+ <view class="tap-touch-line" @touchmove="getstart" @touchend="getend" />
|
|
|
+ <slot />
|
|
|
+ <!-- <scroll-view :style="{'height':scrollHeight - 20 + 'px' }" scroll-y="true" :show-scrollbar="false">
|
|
|
+ <template v-for="item in siteListArr">
|
|
|
+ <siteListModel :info="item" @checkSiteDetails="checkSiteDetails" />
|
|
|
+ </template>
|
|
|
+ </scroll-view> -->
|
|
|
+ <!-- @touchmove="getstart" @tap="tap" @touchend="getend" -->
|
|
|
+ <!-- :style="{'height':windowHeight + 'px','width':windowWidth + 'px','top':fixboxtop +'px','border-top-left-radius':radius,'border-top-right-radius':radius,'z-index':zIndex}" -->
|
|
|
+ <!-- <view class="content" :style="{'height':windowHeight + 'px'}">
|
|
|
+ <view class="tapBoxTouchLine" v-if="showLine">
|
|
|
+ <view class="line" :style="{'transform': `scaleY(${lineScale})`,'width':`${lineWidth}rpx`}"></view>
|
|
|
+ </view>
|
|
|
+ <slot />
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: 'Touchbox',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ windowHeight: 0,
|
|
|
+ touchHeight: uni.upx2px(80),
|
|
|
+ popupHeight: 0,
|
|
|
+ oldHeight: 0,
|
|
|
+ scrollHeight: 0,
|
|
|
+ minTop: 0,
|
|
|
+ maxTop: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ props: {
|
|
|
+ zIndex: {
|
|
|
+ type: Number,
|
|
|
+ default: 99,
|
|
|
+ },
|
|
|
+ smallHeight: {
|
|
|
+ type: Number,
|
|
|
+ default: 0.35,
|
|
|
+ },
|
|
|
+ maxHeight: {
|
|
|
+ type: Number,
|
|
|
+ default: 0.65,
|
|
|
+ },
|
|
|
+ // minHeight: {
|
|
|
+ // type: Number,
|
|
|
+ // default: 0.2,
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ const { windowHeight } = uni.getSystemInfoSync();
|
|
|
+ this.windowHeight = windowHeight;
|
|
|
+ // this.windowWidth = uni.getSystemInfoSync().windowWidth;
|
|
|
+ this.popupHeight = this.oldHeight = windowHeight * this.smallHeight;
|
|
|
+
|
|
|
+ this.maxTop = windowHeight * (1 - this.smallHeight);
|
|
|
+ this.minTop = windowHeight * (1 - this.maxHeight);
|
|
|
+
|
|
|
+ // minTop:0,
|
|
|
+ // maxTop:0,
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(function() {
|
|
|
+ // this.windowWidth = uni.getSystemInfoSync().windowWidth;
|
|
|
+ // this.windowHeight = uni.getSystemInfoSync().windowHeight;
|
|
|
+ // var defaultHeight = this.windowHeight * (1 - this.minHeight);
|
|
|
+ // this.firsttop = defaultHeight;
|
|
|
+ // this.phonetop =
|
|
|
+ // (this.windowHeight * this.maxHeight - this.windowHeight * this.minHeight) / 2;
|
|
|
+ // this.phoneMinTop =
|
|
|
+ // (this.windowHeight * this.minHeight - this.windowHeight * this.smallHeight) / 2;
|
|
|
+ // this.fixboxtop = defaultHeight;
|
|
|
+ // this.$emit('currentHeight', this.windowHeight - this.fixboxtop);
|
|
|
+ // this.$emit('maxtHeight', this.windowHeight * this.maxHeight);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onReady() {},
|
|
|
+ computed: {},
|
|
|
+ watch: {
|
|
|
+ popupHeight(newH, oldH) {
|
|
|
+ this.scrollHeight = newH - this.touchHeight;
|
|
|
+ },
|
|
|
+ scrollHeight: {
|
|
|
+ handler(newH) {
|
|
|
+ this.$emit('currentHeight', newH);
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 隐藏
|
|
|
+ concealList() {
|
|
|
+ this.popupHeight = this.touchHeight
|
|
|
+ },
|
|
|
+ getstart(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ const { clientY, screenY } = e.touches[0];
|
|
|
+ const Y = clientY || screenY;
|
|
|
+ console.log(Y, this.maxTop)
|
|
|
+ // // 这里特殊处理 解决:在滑动框内如果存在滚动元素,则会出现滑动时滑动框和内部滚动同时滑的问题
|
|
|
+ if (Y < this.minTop || Y > (this.windowHeight - this.touchHeight)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.popupHeight = this.windowHeight - Y;
|
|
|
+ },
|
|
|
+ getend() {
|
|
|
+ if (this.popupHeight >= this.oldHeight && (this.popupHeight - this.oldHeight) > 50) {
|
|
|
+ // 上拉
|
|
|
+ this.popupHeight = this.windowHeight * this.maxHeight
|
|
|
+ } else if ((this.oldHeight - this.popupHeight) > 50) {
|
|
|
+ console.log("this.oldHeight = ", this.oldHeight, "this.popupHeight = ", this.popupHeight)
|
|
|
+ const s_h = this.windowHeight * this.smallHeight;
|
|
|
+ // 下拉
|
|
|
+ if (this.popupHeight >= s_h) {
|
|
|
+ // 在中等偏上区域,还原成中等高度
|
|
|
+ this.popupHeight = s_h
|
|
|
+ } else {
|
|
|
+ // 在中等偏下区域,还原成最小高度
|
|
|
+ this.popupHeight = this.touchHeight
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ // 拉取幅度不够,还原,防止误触发
|
|
|
+ this.popupHeight = this.oldHeight
|
|
|
+ };
|
|
|
+
|
|
|
+ // 记录当前高度
|
|
|
+ this.oldHeight = this.popupHeight;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .site-box {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: #ffffff;
|
|
|
+ // padding: 0 12px;
|
|
|
+ transition-property: top;
|
|
|
+ transition-duration: 0.7s;
|
|
|
+ border-radius: 40rpx 40rpx 0 0;
|
|
|
+
|
|
|
+ .tap-touch-line {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 30%;
|
|
|
+ height: 8rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ background-color: rgb(214, 215, 217);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // .tapBoxTouchLine {
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ // justify-content: center;
|
|
|
+ // padding: 20rpx 0 30rpx;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .line {
|
|
|
+ // margin: 0px;
|
|
|
+ // vertical-align: middle;
|
|
|
+ // // border-bottom: 8rpx solid rgb(214, 215, 217);
|
|
|
+ // height: 8rpx;
|
|
|
+ // background-color: rgb(214, 215, 217);
|
|
|
+ // border-radius: 4rpx;
|
|
|
+
|
|
|
+ // // border: 4rpx;
|
|
|
+ // // border-top-color: rgb(214, 215, 217);
|
|
|
+ // // border-right-color: rgb(214, 215, 217);
|
|
|
+ // // border-left-color: rgb(214, 215, 217);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .fixedbox {
|
|
|
+ // position: fixed;
|
|
|
+ // left: 0;
|
|
|
+ // background-color: #ffffff;
|
|
|
+ // padding: 0 12px;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .fixedbox2 {
|
|
|
+ // position: fixed;
|
|
|
+ // left: 0;
|
|
|
+ // background-color: #ffffff;
|
|
|
+ // padding: 0 12px;
|
|
|
+ // transition-property: top;
|
|
|
+ // transition-duration: 0.4s;
|
|
|
+ // }
|
|
|
+</style>
|