Vue realizes that the list does not slide smoothly after long pressing

Preface

Vue is a modern JavaScript framework for building user interfaces. It integrates seamlessly into existing projects and provides an elegant way to build interactive web applications through its rich functionality and easy-to-learn API. In this article, we will discuss the problem that may cause the sliding to be unsmooth when using Vue to implement a long press on the list and then provide a solution.

Problem Description

When we use the list component in Vue, we may encounter the need to slide more options after long pressing a list item. This requirement can be achieved using touchstart, touchmove and touchend events, but in some cases there will be a problem with list items not sliding smoothly. The specific manifestation is that when long pressing and then sliding, the list items have obvious stuck and delay.

Problem Analysis

When we long press a list item and slide it, Vue's internal rendering mechanism will cause blocking, resulting in unsmooth sliding. When we perform a long press operation, the Touchstart event will be triggered and the timer will start. The timer is used to determine whether the long press event is triggered. During the timer, if the user performs a swipe operation, the Touchmove event will be fired and the default scrolling behavior of the container will be prevented. However, since Vue uses an asynchronous way to update the DOM, if the user slides too fast or there are too many list items, Vue may not be able to update the DOM in time. In this way, lags and delays will greatly affect the user experience.

Solution

In order to solve this problem, we can use the following two methods:

1. Debounce

Debounce is a Methods to solve performance problems caused by frequently triggering events in JavaScript. The implementation principle is that within the specified time, only the last triggered event will be executed. We can use the _.debounce() method provided in Lodash.js to achieve this effect.

The way to use debounce is to start a timer in the Touchstart event. If there is no sliding within a certain period of time, it will be judged as a long press event and the sliding mode will be turned on. In sliding mode, this timer will be called every time the Touchmove event is triggered. If the sliding exceeds a certain range, it will be judged as a sliding operation and the long press mode will be cancelled. Due to the debounce method, when our sliding operation is too fast, only the last event will be executed, which can avoid affecting performance and causing unsmooth sliding.

2. Virtual-scroll

Virtual-scroll is a virtual scrolling technology that only renders list items in the visible area when scrolling, instead of rendering them all. This approach can significantly improve list performance, especially when the number of list items is large. Virtual-scroll can be implemented using the vue-virtual-scroll-list component.

The way to use the vue-virtual-scroll-list component is to first pass the list item data into the component as prop, and specify some properties in the component, such as item-height (height of each list item) , total (number of list items), etc. Then, the component will only render the list items within the visible area when rendering, and the visible area will be dynamically adjusted when scrolling. This can avoid rendering too many list items and causing smooth sliding.

Summary

When using Vue to implement sliding after long pressing on the list, it may cause the problem of unsmooth sliding. There are two ways to solve this problem. One is to use debounce, start the timer in the Touchstart event, calculate the user operation method based on the timer, and cancel the timer. The other is to use Virtual-scroll, which improves performance by only rendering currently visible list items. I hope this article will be helpful to readers who encounter such problems.

The above is the detailed content of Vue realizes that the list does not slide smoothly after long pressing. For more information, please follow other related articles on the PHP Chinese website!