Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5897
Star 89
Fork 161
H
hello uni-app x

体验新版 GitCode，发现更多精彩内容 >>

提交 1895fb73 编写于 作者: DCloud-yyl's avatar DCloud-yyl
浏览文件
操作

web端适配，控制scroll-view滚动由scroll-y调整为direction

上级 a6700de3
隐藏空白更改
内联 并排
Showing with 46 addition and 20 deletion
pages/template/half-screen/half-screen.uvue
浏览文件 @ 1895fb73
......@@ -3,10 +3,10 @@
<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"
<view ref="halfScreen" class="halfScreen" @touchstart="onHalfTouchStart" @touchmove="onHalfTouchMove"
@touchend="onHalfTouchEnd">
<view class="halfTitle">半屏弹窗标题</view>
<scroll-view id="halfScroll" class="halfScroll" rebound="true">
<scroll-view ref="halfScroll" class="halfScroll" rebound="true" :direction="scrollDirection">
<view v-for="(item,index) in list" :key="index" class="item">
half screen content-{{item}}
</view>
......@@ -28,8 +28,9 @@
lastY: 0, //上次
lastY2: 0, //
bAnimation: false, //是否动画
halfNode: null as Element | null,
scrollNode: null as Element | null
halfNode: null as UniElement | null,
scrollNode: null as UniElement | null,
scrollDirection: 'vertical'
}
},
methods: {
......@@ -50,8 +51,14 @@
}
let offset = p.screenY - this.halfScreenY;
if (offset > 0) {//向下滚动
this.halfMove = true;
this.scrollNode?.setAttribute('scroll-y', 'false');
this.halfMove = true;
// #ifdef APP
//this.scrollNode?.setAttribute('scroll-y', 'false');
this.scrollNode?.setAttribute('direction', 'none');
// #endif
// #ifdef WEB
this.scrollDirection = 'none';
// #endif
this.halfNode?.style?.setProperty('transform', 'translateY(' + offset.toFixed(2) + 'px)');
this.halfOffset = offset;
} else if (this.halfOffset > 0) {//向上滚动
......@@ -59,8 +66,14 @@
if (offset > this.halfOffset) {
offset = 0;
this.halfMove = false;
this.scrollNode?.setAttribute('scroll-y', 'true');
}
}
// #ifdef APP
//this.scrollNode?.setAttribute('scroll-y', 'true');
this.scrollNode?.setAttribute('direction', 'vertical');
// #endif
// #ifdef WEB
this.scrollDirection = 'vertical';
// #endif
this.halfNode?.style?.setProperty('transform', 'translateY(' + offset.toFixed(2) + 'px)');
this.halfOffset = offset;
}
......@@ -86,11 +99,17 @@
},
switchHalfScreen(show : boolean) {
if (show && ('visible' == this.halfNode?.style?.getPropertyValue('visibility'))) {//容错处理
console.log('qucik click button!!!');
console.log('quick click button!!!');
return;
}
this.halfMove = false;
this.scrollNode?.setAttribute('scroll-y', 'true');
// #ifdef APP
//this.scrollNode?.setAttribute('scroll-y', 'true');
this.scrollNode?.setAttribute('direction', 'vertical');
// #endif
// #ifdef WEB
this.scrollDirection = 'vertical';
// #endif
this.halfScreenY = 0;
this.halfOffset = 0;
let top = this.totalHeight;
......@@ -103,9 +122,9 @@
this.halfNode?.style?.setProperty('transition-timing-function', 'linear');
time *= (this.halfHeight / this.totalHeight); //计算关闭动画时间
}
this.halfNode?.style?.setProperty('transition-duration', time.toFixed(0)+"ms");
this.halfNode?.style?.setProperty('transition-duration', time.toFixed(0)+'ms');
this.halfNode?.style?.setProperty('transition-property', 'top');
this.halfNode?.style?.setProperty('top', top.toFixed(2));
this.halfNode?.style?.setProperty('top', top.toFixed(2)+'px');
setTimeout(() => {
if (!show) {
this.halfNode?.style?.setProperty('visibility', 'hidden');
......@@ -119,12 +138,18 @@
},
resumeHalfScreen() {
let time = 300;//(500*this.halfOffset/this.halfHeight).toFixed(0); //回弹动画时间
this.halfNode?.style?.setProperty('transition-duration', time.toFixed(0)+"ms");
this.halfNode?.style?.setProperty('transition-duration', time.toFixed(0)+'ms');
this.halfNode?.style?.setProperty('transition-timing-function', 'ease-in-out');
this.halfNode?.style?.setProperty('transition-property', 'transform');
this.halfNode?.style?.setProperty('transform', 'translateY(0px)');
this.halfMove = false;
this.scrollNode?.setAttribute('scroll-y', 'true');
this.halfMove = false;
// #ifdef APP
//this.scrollNode?.setAttribute('scroll-y', 'true');
this.scrollNode?.setAttribute('direction', 'vertical');
// #endif
// #ifdef WEB
this.scrollDirection = 'vertical';
// #endif
this.halfScreenY = 0;
this.halfOffset = 0;
setTimeout(() => {
......@@ -135,17 +160,17 @@
}
},
onReady() {
this.halfNode = uni.getElementById('halfScreen');
this.scrollNode = uni.getElementById('halfScroll');
this.halfNode = this.$refs['halfScreen'] as UniElement;//uni.getElementById('halfScreen');
this.scrollNode = this.$refs['halfScroll'] as UniElement;//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));
this.halfNode?.style?.setProperty('top', this.totalHeight.toFixed(2)+'px');
},
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('top', this.totalHeight.toFixed(2)+'px');
this.halfNode?.style?.setProperty('visibility', 'hidden');
}
}
......@@ -184,7 +209,8 @@
}
.halfScroll {
background-color: white;
background-color: white;
flex: 1;
}
.item {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或