Vue+vant移動端處理彈框滑動問題

Vue+vant做移動端需要實作一個彈框向上下滑動的功能

遇到了問題記錄一下

<div class="popupShowHeight" id="popupShowHeight" v-show="popupShow" >
    <van-popup v-model="popupShow" :round="true" position="bottom" :overlay="false"
               :style="{ height: popupShowHeight + '%' }" id="popupListShow">
        <div class="touchTop"
             @touchstart='touchStartHandle'
             @touchmove='touchMoveHandle'
             @touchend='touchEndHandle'>
            <div class="touchMove">
            </div>
        </div>

        <van-list
                v-model="loading"
                :finished="finished"
                :finished-text="finishedText"
                :error.sync="error"
                error-text="請求失敗，點選重新加載"
                @load="onLoad"
        >
            <van-cell v-for="item in list" :key="item.contractno" class="cellStyle">
                <div class="contractnoStyle">{{ item.contractno }}</div>
                <div>{{ item.contractuser }}</div>
                <div>{{ item.croptype }}</div>
                <div>{{ item.contractarea }}</div>
                <div class="cell_last">
                <span v-if="item.iscompare == 1 || item.iscompare == '1'" :class="item.color"
                      @click="contractInfo(item)">{{ item.risklevel }}</span>
                    <span v-else><van-icon name="arrow" color="#333333" @click="contractInfo(item)"/></span>
                </div>
            </van-cell>
        </van-list>
    </van-popup>
</div>
           

// 導入相關的元件
import Vue from "vue";
import {Popup, List, cell} from 'vant';
Vue.use(Popup);
Vue.use(List);
Vue.use(cell);

methods: {
// 螢幕滑動事件
touchStartHandle(e) {
    try {
        this.startX = Number(e.touches[0].clientX);
        this.startY = Number(e.touches[0].clientY);
    } catch (e) {
        console.log(e.message);
    }
},
// 擷取螢幕滑動的寬高
touchMoveHandle(e) {
    let _this = this;
    let popupShowID = document.getElementById("popupShowHeight");
    let popu = document.getElementById("popupListShow");
    var endX = Number(e.touches[0].clientX);
    var endY = Number(e.touches[0].clientY);
    var diffX = endX - this.startX;
    var diffY = endY - this.startY;
    try {
        _this.popupShowHe(popupShowID, popu, diffY); 
    } catch (e) {
        console.log(e.message);
    }
},
// 滑動結束
touchEndHandle() {
    try {
        let popu = document.getElementById("popupListShow");
        if (popu)
            popu.style.overflowY = "auto";
    } catch (e) {
        console.log(e.message)
    }
},
// 給定彈框固定高度
popupShowHeigth(popupShowHeight, screenHeight) {
    let popupHeight = 0;
    popupShowHeight = (popupShowHeight - screenHeight / 1000);
    if (popupShowHeight <= 20) {
        popupHeight = 20;
    } else if (popupShowHeight >= 85) {
        popupHeight = 85;
    } else {
        popupHeight = (popupShowHeight - screenHeight / 1000);
    }
    return popupHeight;
},
// 判斷彈框id是否為空
popupShowHe(popupShow, popu, diffY) {
    if (popupShow) {
        this.popupShowHeight = this.popupShowHeigth(this.popupShowHeight, diffY);
        popupShow.style.height = this.popupShowHeigth(this.popupShowHeight, diffY) + "%";
        if (popu) popu.style.overflowY = "hidden";
    }
},
}
watch: {
popupShow() {
    if (this.popupShow) {
        this.popupShowHeight = 32;
        this.popupShowHe(document.getElementById("popupShowHeight"),
            document.getElementById("popupListShow"), 0);
        this.touchEndHandle();
    }
},

}