Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6072
Star 94
Fork 167
H
hello uni-app x
提交 8d8864bb 编写于 作者: DCloud-yyl's avatar DCloud-yyl
浏览文件
操作

优化关闭半屏弹窗可能出现抖一下的问题

上级 36f7ad31
隐藏空白更改
内联 并排
Showing with 192 addition and 194 deletion
pages/template/half-screen/half-screen.uvue
浏览文件 @ 8d8864bb
<template> <template>
<view id="page" class="page"> <view id="page" class="page">
<text style="margin: 10px">半屏弹窗效果是通过监听TouchEvent实现，当半屏窗口移动时禁用scroll-view的滚动，避免两者的冲突。</text> <text
<button class="bottomButton" @click="switchHalfScreen(true)">打开弹窗</button> style="margin: 10px">半屏弹窗，演示了弹出层内scroll-view滚动到顶时由滚变拖。本效果是通过监听TouchEvent实现，当半屏窗口移动时禁用scroll-view的滚动，避免两者的冲突。</text>
<view id="halfScreen" class="halfScreen" @touchstart="onHalfTouchStart" @touchmove="onHalfTouchMove" @touchend="onHalfTouchEnd"> <button class="bottomButton" @click="switchHalfScreen(true)">打开弹窗</button>
<view class="halfTitle" >半屏弹窗标题</view> <view id="halfScreen" class="halfScreen" @touchstart="onHalfTouchStart" @touchmove="onHalfTouchMove"
<scroll-view id="halfScroll" class="halfScroll" @scroll="onScroll" rebound="true"> @touchend="onHalfTouchEnd">
<view v-for="(item,index) in list" :key="index" class="item"> <view class="halfTitle">半屏弹窗标题</view>
half screen content-{{item}} <scroll-view id="halfScroll" class="halfScroll" rebound="true">
</view> <view v-for="(item,index) in list" :key="index" class="item">
</scroll-view> half screen content-{{item}}
</view> </view>
</view> </scroll-view>
</template> </view>
</view>
<script> </template>
export default {
data() { <script>
return { export default {
list: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'], data() {
totalHeight: 0, //总高度 return {
halfMove: false, //是否Move，响应TouchMove list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'],
halfScreenY: 0, //响应TouchMove的起始点Y坐标 totalHeight: 0, //总高度
halfOffset: 0, //偏移的位置，translateY halfMove: false, //是否Move，响应TouchMove
halfHeight: 0, //高度 halfScreenY: 0, //响应TouchMove的起始点Y坐标
lastY: 0, //上次 halfOffset: 0, //偏移的位置，translateY
lastY2: 0, // halfHeight: 0, //高度
bAnimation: false, //是否动画 lastY: 0, //上次
halfNode: null as Element | null, lastY2: 0, //
scrollNode: null as Element | null bAnimation: false, //是否动画
} halfNode: null as Element | null,
}, scrollNode: null as Element | null
methods: { }
onHalfTouchStart(_:TouchEvent) { },
this.halfNode?.style?.setProperty('transitionDuration', 0); methods: {
//console.log('Title TouchStart: ', e); onHalfTouchStart(_ : TouchEvent) {
}, this.halfNode?.style?.setProperty('transitionDuration', 0);
onHalfTouchMove(e:TouchEvent) { },
if(this.bAnimation){//容错处理 onHalfTouchMove(e : TouchEvent) {
return; if (this.bAnimation) {//容错处理
} return;
let top:number = this.scrollNode?.scrollTop??0; }
let p = e.touches[0]; let top : number = this.scrollNode?.scrollTop ?? 0;
this.lastY2 = this.lastY; let p = e.touches[0];
this.lastY = p.screenY; this.lastY2 = this.lastY;
if(top <= 0.01 || this.halfMove){ this.lastY = p.screenY;
if(this.halfScreenY == 0){ if (top <= 0.01 || this.halfMove) {
this.halfScreenY = p.screenY; if (this.halfScreenY == 0) {
} this.halfScreenY = p.screenY;
let offset = p.screenY-this.halfScreenY; }
if(offset > 0){//向下滚动 let offset = p.screenY - this.halfScreenY;
this.halfMove = true; if (offset > 0) {//向下滚动
this.scrollNode?.setAttribute('scroll-y', 'false'); this.halfMove = true;
this.halfNode?.style?.setProperty('transform','translateY('+offset+'px)'); this.scrollNode?.setAttribute('scroll-y', 'false');
if(offset==0){ this.halfNode?.style?.setProperty('transform', 'translateY(' + offset.toFixed(2) + 'px)');
console.log('translateY(0px)', this.halfOffset) this.halfOffset = offset;
} } else if (this.halfOffset > 0) {//向上滚动
this.halfOffset = offset; offset = this.halfScreenY - p.screenY;
}else if(this.halfOffset>0){//向上滚动 if (offset > this.halfOffset) {
offset = this.halfScreenY-p.screenY; offset = 0;
if(offset>this.halfOffset){ this.halfMove = false;
offset = 0; this.scrollNode?.setAttribute('scroll-y', 'true');
this.halfMove = false; }
this.scrollNode?.setAttribute('scroll-y', 'true'); this.halfNode?.style?.setProperty('transform', 'translateY(' + offset.toFixed(2) + 'px)');
} this.halfOffset = offset;
this.halfNode?.style?.setProperty('transform','translateY('+offset+'px)'); }
if(offset==0){ }
console.log('translateY(0px)', this.halfOffset) },
} onHalfTouchEnd(_ : TouchEvent) {
this.halfOffset = offset; this.halfScreenY = 0;
} if (this.bAnimation) {//容错处理
} return;
//console.log('TouchMove', e.target); }
}, let top : number = this.scrollNode?.scrollTop ?? 0;
onHalfTouchEnd(_:TouchEvent) { let bHide = (this.halfHeight - this.halfOffset) < this.halfHeight / 4;
this.halfScreenY = 0; if (bHide) {
if(this.bAnimation){//容错处理 bHide = this.lastY2 > 0 && this.lastY2 <= this.lastY;
return; } else if (top <= 0.01) {
} bHide = (this.lastY - this.lastY2) > 3; //向下滑动计算加速度判断是否关闭，简单处理未考虑时间
let top:number = this.scrollNode?.scrollTop??0; }
let bHide = (this.halfHeight-this.halfOffset)<this.halfHeight/4; if (bHide) {
if(bHide){ this.switchHalfScreen(false);
bHide = this.lastY2>0&&this.lastY2<=this.lastY; } else if (this.halfOffset > 0) {
}else if(top <= 0.01){ this.resumeHalfScreen();
bHide = (this.lastY-this.lastY2)>3; //向下滑动计算加速度判断是否关闭，简单处理未考虑时间 }
} },
if(bHide){ switchHalfScreen(show : boolean) {
this.switchHalfScreen(false); if (show && ('visible' == this.halfNode?.style?.getPropertyValue('visibility'))) {//容错处理
}else if(this.halfOffset>0){ console.log('qucik click button!!!');
this.resumeHalfScreen(); return;
} }
}, this.halfMove = false;
onScroll(_: ScrollEvent) { this.scrollNode?.setAttribute('scroll-y', 'true');
//console.log('onScroll: ', e); this.halfScreenY = 0;
}, this.halfOffset = 0;
switchHalfScreen(show:boolean) { let top = this.totalHeight;
if(show&&('visible'==this.halfNode?.style?.getPropertyValue('visibility'))){//容错处理 let time = 300;
console.log('qucik click button!!!'); if (show) {
return; top = this.totalHeight * 30 / 100; //计算显示的位置
} this.halfNode?.style?.setProperty('visibility', 'visible');
this.halfMove = false; this.halfNode?.style?.setProperty('transitionTimingFunction', 'ease-in-out');
this.scrollNode?.setAttribute('scroll-y', 'true'); } else {
this.halfScreenY = 0; this.halfNode?.style?.setProperty('transitionTimingFunction', 'linear');
this.halfOffset = 0; time *= (this.halfHeight / this.totalHeight); //计算关闭动画时间
let top = this.totalHeight; }
let time = 300; this.halfNode?.style?.setProperty('transitionDuration', time.toFixed(0));
if(show){ this.halfNode?.style?.setProperty('transitionProperty', 'top');
top = this.totalHeight*30/100; //计算显示的位置 this.halfNode?.style?.setProperty('top', top.toFixed(2));
this.halfNode?.style?.setProperty('visibility','visible'); setTimeout(() => {
this.halfNode?.style?.setProperty('transitionTimingFunction','ease-in-out'); if (!show) {
}else{ this.halfNode?.style?.setProperty('visibility', 'hidden');
this.halfNode?.style?.setProperty('transitionTimingFunction','linear'); this.halfNode?.style?.setProperty('transitionDuration', 0);
time *= (this.halfHeight/this.totalHeight); //计算关闭动画时间 this.halfNode?.style?.setProperty('transform', '');
} }
this.halfNode?.style?.setProperty('transitionDuration', time.toFixed(0)); this.halfNode?.style?.setProperty('transitionProperty', '');
this.halfNode?.style?.setProperty('transitionProperty','top'); this.bAnimation = false;
this.halfNode?.style?.setProperty('top', top.toFixed(2)); }, time)
setTimeout(()=>{ this.bAnimation = true;
if(!show){ },
this.halfNode?.style?.setProperty('visibility','hidden'); resumeHalfScreen() {
this.halfNode?.style?.setProperty('transitionDuration', 0); let time = 300;//(500*this.halfOffset/this.halfHeight).toFixed(0); //回弹动画时间
this.halfNode?.style?.setProperty('transform',''); this.halfNode?.style?.setProperty('transitionDuration', time.toFixed(0));
} this.halfNode?.style?.setProperty('transitionTimingFunction', 'ease-in-out');
this.halfNode?.style?.setProperty('transitionProperty',''); this.halfNode?.style?.setProperty('transitionProperty', 'transform');
this.bAnimation = false; this.halfNode?.style?.setProperty('transform', 'translateY(0px)');
}, time) this.halfMove = false;
this.bAnimation = true; this.scrollNode?.setAttribute('scroll-y', 'true');
}, this.halfScreenY = 0;
resumeHalfScreen() { this.halfOffset = 0;
let time = 300;//(500*this.halfOffset/this.halfHeight).toFixed(0); //回弹动画时间 setTimeout(() => {
this.halfNode?.style?.setProperty('transitionDuration',time.toFixed(0)); this.bAnimation = false;
this.halfNode?.style?.setProperty('transitionTimingFunction','ease-in-out'); this.halfNode?.style?.setProperty('transitionProperty', '');
this.halfNode?.style?.setProperty('transitionProperty','transform'); }, time)
this.halfNode?.style?.setProperty('transform','translateY(0px)'); this.bAnimation = true;
this.halfMove = false; }
this.scrollNode?.setAttribute('scroll-y', 'true'); },
this.halfScreenY = 0; onReady() {
this.halfOffset = 0; this.halfNode = uni.getElementById('halfScreen');
setTimeout(()=>{ this.scrollNode = uni.getElementById('halfScroll');
this.bAnimation = false;
}, time) this.halfHeight = this.halfNode!.getBoundingClientRect().height;
this.bAnimation = true; this.totalHeight = uni.getElementById('page')?.getBoundingClientRect()?.height ?? 0;//uni.getWindowInfo().windowHeight
} this.halfNode?.style?.setProperty('top', this.totalHeight.toFixed(2));
}, },
onReady() { onResize() {
this.halfNode = uni.getElementById('halfScreen'); this.halfHeight = this.halfNode?.getBoundingClientRect()?.height ?? 0;
this.scrollNode = uni.getElementById('halfScroll'); this.totalHeight = uni.getWindowInfo().windowHeight;
this.halfNode?.style?.setProperty('top', this.totalHeight.toFixed(2));
this.halfHeight = this.halfNode!.getBoundingClientRect().height; this.halfNode?.style?.setProperty('visibility', 'hidden');
this.totalHeight = uni.getElementById('page')?.getBoundingClientRect()?.height??0;//uni.getWindowInfo().windowHeight; }
this.halfNode?.style?.setProperty('top', this.totalHeight.toFixed(2)); }
}, </script>
onResize() {
this.halfHeight = this.halfNode?.getBoundingClientRect()?.height??0; <style>
this.totalHeight = uni.getElementById('page')?.getBoundingClientRect()?.height??0; .page {
this.halfNode?.style?.setProperty('top', this.totalHeight.toFixed(2)); flex: 1;
this.halfNode?.style?.setProperty('visibility','hidden'); background-color: darkgrey;
} }
}
</script> .bottomButton {
position: absolute;
<style> width: 100%;
.page { bottom: 0px;
flex: 1; }
background-color: darkgrey;
} .halfScreen {
.bottomButton { position: absolute;
position: absolute; top: 100%;
width: 100%; width: 100%;
bottom: 0px; height: 70%;
} transition-timing-function: ease-in-out;
.halfScreen { /*ease ease-in ease-out ease-in-out linear step-start step-end*/
position: absolute; transition-property: top;
top: 100%; transition-duration: 0;
width: 100%; visibility: hidden;
height: 70%; }
transition-timing-function: ease-in-out; /*ease ease-in ease-out ease-in-out linear step-start step-end*/
transition-property: top; .halfTitle {
transition-duration: 0; align-items: center;
visibility: hidden; justify-content: center;
} height: 48px;
.halfTitle { background-color: ghostwhite;
align-items: center; border-radius: 10px 10px 0 0;
justify-content: center; }
height: 48px;
background-color: ghostwhite; .halfScroll {
border-radius: 10px 10px 0 0; background-color: white;
} }
.halfScroll {
background-color: white; .item {
} height: 100px;
.item { }
height: 100px;
}
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或