diff --git a/pages/tabBar/template.uvue b/pages/tabBar/template.uvue
index f9b604d4e46b9894b8e55414d30e3b4965f8ce1b..445d951f94b07ef245adf37cb9047efa6b43e172 100644
--- a/pages/tabBar/template.uvue
+++ b/pages/tabBar/template.uvue
@@ -130,14 +130,13 @@
open: false,
pages: [] as Page[],
},
- // {
- // id: 'half-screen',
- // url: 'half-screen',
- // name: '半屏弹窗',
- // open: false,
- // enable: false,
- // pages: [] as Page[],
- // },
+ {
+ id: 'half-screen',
+ url: 'half-screen',
+ name: '半屏弹窗',
+ open: false,
+ pages: [] as Page[],
+ },
{
id: 'drop-card',
url: 'drop-card',
@@ -226,4 +225,4 @@
\ No newline at end of file
+
diff --git a/pages/template/half-screen/half-screen.uvue b/pages/template/half-screen/half-screen.uvue
index 7c362299c3fba388a21522e13e76be3422412e3a..e438d533679634f786c11f6a85c49c1abc2433f1 100644
--- a/pages/template/half-screen/half-screen.uvue
+++ b/pages/template/half-screen/half-screen.uvue
@@ -1,10 +1,10 @@
-
+
TouchEvent还有细节需要优化,需支持拦截事件分发逻辑解决拖拽半屏窗口引起内容滚动的问题
-
+
半屏弹窗标题
-
+
half screen content-{{item}}
@@ -48,22 +48,32 @@
this.halfScreenY = p.screenY;
}
let offset = p.screenY-this.halfScreenY;
- if(offset > 0){
+ 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.lastY2>this.lastY && this.halfOffset>0){//容错触发向下滚动的误差
+ }else if(this.halfOffset>0){//向上滚动
offset = this.halfScreenY-p.screenY;
if(offset>this.halfOffset){
- 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;
}
@@ -76,7 +86,7 @@
}
if(bHide){
this.switchHalfScreen(false);
- }else{
+ }else if(this.halfOffset>0){
this.resumeHalfScreen();
}
},
@@ -89,6 +99,7 @@
return;
}
this.halfMove = false;
+ this.scrollNode?.setAttribute('scroll-y', 'true');
this.halfScreenY = 0;
this.halfOffset = 0;
let top = this.totalHeight;
@@ -103,7 +114,7 @@
}
this.halfNode?.style?.setProperty('transitionDuration', time.toFixed(0));
this.halfNode?.style?.setProperty('transitionProperty','top');
- this.halfNode?.style?.setProperty('top', top.toFixed(0));
+ this.halfNode?.style?.setProperty('top', top.toFixed(2));
setTimeout(()=>{
if(!show){
this.halfNode?.style?.setProperty('visibility','hidden');
@@ -122,6 +133,7 @@
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(()=>{
@@ -131,17 +143,13 @@
}
},
onReady() {
- this.halfNode = this.$refs['halfScreen'] as Element;
+ this.halfNode = uni.getElementById('halfScreen');
this.halfHeight = this.halfNode!.getBoundingClientRect().height;
- this.scrollNode = this.$refs['halfScroll'] as Element;
+ this.scrollNode = uni.getElementById('halfScroll');
- this.totalHeight = uni.getWindowInfo().windowHeight;
+ this.totalHeight = uni.getElementById('page')?.getBoundingClientRect()?.height??0;//uni.getWindowInfo().windowHeight;
this.halfNode?.style?.setProperty('top', this.totalHeight.toString());
},
- // onResize() {
- // this.halfHeight = this.halfNode!.getBoundingClientRect().height;
- // this.totalHeight = uni.getWindowInfo().windowHeight;
- // }
}
@@ -169,11 +177,11 @@
align-items: center;
justify-content: center;
height: 48px;
- background-color: cornflowerblue;
+ background-color: ghostwhite;
border-radius: 10px 10px 0 0;
}
.halfScroll {
- background-color: ghostwhite;
+ background-color: white;
}
.item {
height: 100px;