+
@@ -107,7 +117,7 @@
-
@@ -229,6 +239,7 @@ export default {
refreshing: false,
mtScroll: 0,
+ moveDistance: 0,
backgroundScale: 0, // 背景缩放比例
startY: 0, // 触摸起始位置
moveY: 0, // 触摸移动位置
@@ -327,9 +338,12 @@ export default {
methods: {
// 触摸开始事件
onTouchStart(e) {
+ if(this.isTouching){
+ return false
+ }
+ this.isTouching = true;
this.mtScroll = 0;
this.backgroundScale = 0;
- this.isTouching = true;
if (e.touches && e.touches.length > 0) {
this.startY = e.touches[0].pageY;
}
@@ -342,9 +356,9 @@ export default {
if (e.touches && e.touches.length > 0) {
this.moveY = e.touches[0].pageY;
const moveDistance = this.moveY - this.startY;
-
+ // && moveDistance < 200
// 只有向下移动(moveDistance > 0)且移动距离合理时才触发下拉效果
- if (moveDistance > 0 && moveDistance < 200) {
+ if (moveDistance > 0) {
// 限制最大下拉距离
const query = uni.createSelectorQuery().in(this);
query
@@ -355,6 +369,8 @@ export default {
// 只有在滚动到顶部且向下拉动时才执行缩放
if (scrollTop <= 0) {
// 根据移动距离计算缩放值,使效果更自然
+ this.moveDistance = moveDistance;
+
this.backgroundScale = Math.min(moveDistance * 0.2, 800); // 限制最大缩放值
this.mtScroll = Math.min(moveDistance * 0.2, 800);
}
@@ -368,10 +384,13 @@ export default {
// 触摸结束事件
onTouchEnd() {
let that = this;
+
that.isTouching = false;
const animationDuration = 300; // 动画持续时间(ms)
const frameDuration = 16; // 每帧间隔(约60fps)
const totalFrames = Math.ceil(animationDuration / frameDuration);
+ // that.moveDistance = 0;
+ // that.backgroundScale = 0;
let currentFrame = 0;
const startScale = that.backgroundScale;
const startScroll = that.mtScroll;
@@ -380,10 +399,12 @@ export default {
const progress = Math.min(currentFrame / totalFrames, 1);
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
that.backgroundScale = startScale * (1 - easeOutQuart);
+ that.moveDistance = startScale * (1 - easeOutQuart);
that.mtScroll = startScroll * (1 - easeOutQuart);
if (progress < 1) {
setTimeout(animate, frameDuration);
} else {
+ that.moveDistance = 0;
that.backgroundScale = 0;
that.mtScroll = 0;
}