Vue+vant移动端处理弹框滑动问题

ゝ一世哀愁。 2022-12-31 02:19 793阅读 0赞

**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();
        }
    },
    
    }