About uniApp editor WeChat sliding problem

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

Recommend

VMware configuration VMnet8 network method steps

Table of contents 1. Introduction 2. Configuratio...

Enable sshd operation in docker

First, install openssh-server in docker. After th...

MySQL 8.0.12 installation configuration method and password change

This article records the installation and configu...

Perfect Solution for No rc.local File in Linux

Newer Linux distributions no longer have the rc.l...

Example of stars for CSS rating effect

What? What star coat? Well, let’s look at the pic...

Ubuntu installation cuda10.1 driver implementation steps

1. Download cuda10.1: NVIDIA official website lin...

Web Standard Application: Redesign of Tencent QQ Home Page

Tencent QQ’s homepage has been redesigned, and Web...

MySQL Optimization Summary - Total Number of Query Entries

1. COUNT(*) and COUNT(COL) COUNT(*) usually perfo...