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:
|
<<: About the usage and precautions of promise in javascript (recommended)
>>: vue element el-transfer adds drag function
Method 1: <input id= "File1" type= &q...
Recently, a friend asked me a question: When layo...
Table of contents 1. Introduction 2. Configuratio...
First, install openssh-server in docker. After th...
This article records the installation and configu...
Newer Linux distributions no longer have the rc.l...
The test is passed in the nodejs environment. The...
What? What star coat? Well, let’s look at the pic...
background During the project development process...
1. Download cuda10.1: NVIDIA official website lin...
Xiaobai records the installation of vmtools: 1. S...
Tencent QQ’s homepage has been redesigned, and Web...
1. COUNT(*) and COUNT(COL) COUNT(*) usually perfo...
1. Dynamic Components <!DOCTYPE html> <h...
1. Background 1. The front end uses vue + vuex + ...