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