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