About uniApp editor WeChat sliding problem

The uniapp applet will have a similar drop-down problem in WeChat

The solution is to add a method to prohibit sliding down in the onLaunch method of the app.vue page

this.$nextTick(() => {
document.body.addEventListener("touchmove", this.addBodyTouchEvent, {
passive: false
});
});

After the problem is solved, it is impossible to slide in the editor component of uniApp

Workaround

Add these two values in data

Add touchstart and touchend methods to manually write sliding effects

touchstart(e) {
this.previewScrollTop = e.touches[0].pageY;
},
touchend(e) {
let distance = e.changedTouches[0].pageY - this.previewScrollTop;
if (Math.abs(distance) <= 10) {
return false;
}
//Do not scroll when the distance is too short let dom = this.$refs.editor.$el.getElementsByClassName("ql-editor")[0],
maxHeight = Math.max(0, dom.scrollHeight - dom.clientHeight), //Maximum height range tempData = this.scrollTop + (distance >= 0 ? -60 : 60); //Calculate the required height data if (tempData >= maxHeight) {
this.scrollTop = maxHeight;
dom.scrollTop = this.scrollTop;
} else if (tempData <= 0) {
this.scrollTop = 0;
dom.scrollTop = this.scrollTop;
} else {
this.scrollTop = tempData;
dom.scrollTop = this.scrollTop;
}
}

The sliding effect appears at this time. But the sliding is not smooth.

I wanted to write an animated transition effect. but. This sliding is done using the dom.scrollTop property. This property does not belong to the CSS property and cannot use CSS transition animation

So I wrote a js method.

/**
* Animation scrolls vertically to the specified position on the page* @param { } dom element object* @param { Number } currentY current position* @param { Number } targetY target position*/
export function scrollAnimation(dom, currentY, targetY) {
// Calculate the distance to move let needScrollTop = targetY - currentY;
let _currentY = currentY;
setTimeout(() => {
// The number of sliding frames per call will be different each time const dist = Math.ceil(needScrollTop / 10);
_currentY += dist;
dom.scrollTo(_currentY, currentY);
// If the movement is less than ten pixels, move directly, otherwise call recursively to achieve animation effect if (needScrollTop > 10 || needScrollTop < -10) {
scrollAnimation(dom, _currentY, targetY);
} else {
dom.scrollTo(_currentY, targetY);
}
}, 1);
}

Recall

touchend(e) {
let distance = e.changedTouches[0].pageY - this.previewScrollTop;
if (Math.abs(distance) <= 10) {
return false;
}
//Do not scroll when the distance is too short let dom = this.$refs.editor.$el.getElementsByClassName("ql-editor")[0],
maxHeight = Math.max(0, dom.scrollHeight - dom.clientHeight), //Maximum height range tempData = this.scrollTop + (distance >= 0 ? -60 : 60); //Calculate the required height data if (tempData >= maxHeight) {
this.scrollTop = maxHeight;
dom.scrollTop = this.scrollTop;
} else if (tempData <= 0) {
this.scrollTop = 0;
dom.scrollTop = this.scrollTop;
} else {
this.scrollTop = tempData;
scrollAnimation(dom, 0, this.scrollTop);
}
}

Note:

This question was originally intended to be written using the Transform: translateY( y ) property, and in fact it was done.

But after doing it, I found

let dom = this.$refs.editor.$el.getElementsByClassName("ql-editor")[0];

The selected element here is the element below the red box. When doing offset, the entire element is offset. The document is not fully displayed but there is a large blank space below. I didn't take any screenshots at that time. Record the pitfalls you encounter.

This is the end of this article about the uniApp editor WeChat sliding problem. For more related uniApp editor WeChat sliding content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Ideas and codes for implementing waterfall flow layout in uniapp applet
Uniapp WeChat applet: Solution to key failure
uniapp H5 https cross-domain request implementation
Detailed explanation of uniapp's global variable implementation
Uniapp develops a small program to realize the display and hiding effects of sliding page control elements
Uniapp WeChat applet realizes multiple countdowns on one page
Uniapp e-commerce applet implements 30-minute countdown for orders
Uniapp implements slidable tabs
Analyze how uniapp dynamically obtains the interface domain name

<<: About the usage and precautions of promise in javascript (recommended)

>>: vue element el-transfer adds drag function