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

Summary of new usage of vi (vim) under Linux

I have used the vi editor for several years, but ...

A few things you need to know about responsive layout

1. Introduction Responsive Web design allows a we...

Simple use of Vue vee-validate plug-in

Table of contents 1. Installation 2. Import 3. De...

iframe src assignment problem (server side)

I encountered this problem today. I reassigned the...

How to implement the paging function of MyBatis interceptor

How to implement the paging function of MyBatis i...

Mycli is a must-have tool for MySQL command line enthusiasts

mycli MyCLI is a command line interface for MySQL...

JS native 2048 game source code sharing (the latest on the Internet)

I have been learning about algorithms recently an...

...

Simple comparison of meta tags in html

The meta tag is used to define file information an...

Detailed explanation of Vue life cycle

Table of contents Why understand the life cycle W...

Three properties of javascript objects

Table of contents 1. writable: writable 2. enumer...