//弹窗样式
<view class="addpop" @tap.stop="" :class="show==false?'closepop':show==true?'showpop':''" id="addpop" :style="{height:popheight!=''?popheight +'rpx':640+'rpx'}" >
<!-- 拖拽 -->
<view class="btnpop-box" @touchend='touchend' @touchmove="touchmove($event)" @touchstart="touchstart($event)">
<view class="drag">
</view>
</view>
<view class="pop-tit">
添加藏品材料
<view class="pop-tit-line">
</view>
</view>
<view class="pop-content">
<template v-if="list.length>0">
<view class="pop-list" @click.stop="addlist(index)" v-for="(item,index) in list" :key="index">
<view class="poplist-left">
<img :src="item.image" alt="">
</view>
<view class="poplist-right">
<view class="pop-list-content">
<view class="pop-list-tit">
{{item.name}}
</view>
<view class="pop-list-num">
X{{item.num}}
</view>
</view>
<view class="pop-radio" v-if="item.checked==false">
<img :src="Unchecked" alt="">
</view>
<view class="pop-radio" v-else>
<img :src="checked" alt="">
</view>
</view>
</view>
</template>
<view class="pop-list" v-else>
<view class="poplist-left">
<img :src="mage.image" alt="">
</view>
<view class="poplist-right">
<view class="pop-list-content">
<view class="pop-list-tit">
藏品材料
</view>
<view class="pop-list-num">
材料不足
</view>
</view>
<view class="pop-radio">
<!-- <img :src="checked" alt=""> -->
</view>
</view>
</view>
</view>
<view class="pop-btn-box">
<view class="pop-btn-left">
已选择:<span>{{numL}}/{{numLs}}</span>
</view>
<!-- :class="numL>0?'pop-btn-submit':''" -->
<view :class="numL>0?'pop-btn-submit':'pop-btn-submit1'" @tap.stop="addmaterial()">
{{numL>0?'添加材料':'请选择材料'}}
</view>
</view>
</view>
js //这里默认弹窗高度为640 最高为1080
data(){
startX: 0, //开始坐标
startY: 0,
popheight:'', //弹窗高度
movebottom:null ,// 保存的向上拖动后的最大高度
lastheight:null, //触摸结束后的弹窗高度
show:null,
}
methods:{
touchstart(e) {
//开始触摸时
this.startY = e.changedTouches[0].clientY
},
touchmove:function(target) {
let touchMoveY = target.changedTouches[0].clientY //滑动变化坐标 滑动后的坐标
let movestar=Number(this.startY)- Number(touchMoveY)
if (movestar>0) {
if (this.lastheight!=null) {
this.popheight= (this.lastheight+movestar)
} else{
this.popheight= (640+movestar)
}
if(this.popheight>1080){
this.popheight=1080
}
this.movebottom=this.popheight
} else if(movestar<0){
if (this.lastheight!=null) {
this.popheight= (this.movebottom+movestar)
} else{
this.popheight= (640+movestar)
}
if(this.popheight<640){
this.popheight=640
}
}
},
touchend(){
this.lastheight=this.popheight
},
}