移动端、uniapp自定义可拖拽大小弹窗可拖拽弹窗高度可变化弹窗

最新推荐文章于 2026-06-24 12:02:29 发布

原创最新推荐文章于 2026-06-24 12:02:29 发布 · 1.6k 阅读 ·

大模型引用 1 次

本内容遵循CC 4.0 BY-SA版权协议

এ᭄ꦿ十二ঞ

关注

标签

#uni-app #javascript #java

分类前端开发

该代码示例展示了如何在Vue.js中创建一个弹窗组件，弹窗支持拖动功能以及动态调整高度。当用户触摸并移动时，弹窗会根据手势改变高度，同时设置了高度的最大值。内容包括列表项，可以选择并添加藏品材料。

//弹窗样式

<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
			},
}