How to make vue mobile terminal implement pull-down refresh function
This time I will show you how to make the vue mobile terminal realize the pull-down refresh function, and how to make the vue mobile terminal realize the pull-down refresh function. What are the precautions?The following is a practical case, let's take a look .
Before talking about this function, everyone must first understand how to trigger the scroll bar event.
Be sure to note that all scroll events must meet this condition, and the same is true for horizontal scroll bars.
As long as the width of the child element is greater than the width of the parent element That's it. (The next article will talk about how to implement a horizontal scroll bar)
Get to the point! ! !
Let’s first look at how to analyze this pull-down refresh.
Three events on the mobile side to be used: touchstart (finger pressed), touchmove (finger moved), touchend (finger left)
Pull-down refresh is (touchstart => touchmove (Move down) =>touchend) a process
General idea:
Drop-down is mainly related to the finger touching the y-axis point
1. Record the coordinate point where the finger presses the y-axis
2. Record the distance the finger moves when it moves (note: to judge whether the finger moves up or down, up Shifting means scrolling)
3. Start the pull-down refresh event
Look at the code:
In vue, you need to register the event in methods, in Bind to the parent element. Everyone here should be building projects using vue-cli!
If not, I will give you a link later, which contains the already built project structure. Contains the source code and demo of this plug-in. 1
<template> <p class="parent"> <p class="child"></p> </p> </template> <script> export default { data(){ return { top: 0, startY: 0, // 保存 y轴点的位置 touching: false, // 代表当前是否处于 下拉刷新行为的开关,也就是当属于滚动行为时,就要退出该事件机制 } }, methods: { touchStart(e) { // e代表该事件对象,e.targetTouches[0].pageY可以拿到手指按下的 y轴点 this.startY = e.targetTouches[0].pageY // 开启下拉刷新状态 this.touching = true }, touchMove(e) { //这个 touchMove,只要页面在动都会发生的,所以 touching就起作用了 // 如果 touching为false,说明这个正在移动的页面不是我们想要的下拉刷新,有可能是用户随意拉了一下页面而已,或者其他 if(!this.touching) return // 获取移动的距离 let diff = e.targetToc=uches[0].pageY - this.startY //判断是向上拉还是向下拉 if(diff >0) { e.preventDefault() } else { return } //这个this.top要对应绑定到该元素的transform: translateY(+top+ 'px')上,不然是无法拉动的 // 因此这里还要对偏移高度做一下处理,直接设置diff +(this.state === 2 ? 40 : 0) 太快了,因为拉取幅度太大 // 让diff*0.25这样子就差不多了 this.top = Math.floor(diff*0.25) + (this.state === 2 ? 40 : 0) if(this.top >= 40){ this.state = 1 //代表正在拉取 } else { this.state = 0 // 代表初始转态 } }, touchEnd(e) { this.touching = false if(this.state === 2) { this.top = 40 return } // 判断抬起时的高度,是大于40 就开启刷新 if(this.top >= 40) { this.refresh() } else { this.state = 0 this.top = 0 } }, refresh() { this.state = 2 this.top = 40 const self = this // 这里可以调用父组件的方法去请求刷新接口 this.$emit('getRefresh', function(self){ //传个回调过去,请求完数据就复原 self.state = 0 self.top = 0 }) } } } </script>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
How to use Angular to open Font-Awesome
How to use JS to achieve front-end and back-end isomorphism
The above is the detailed content of How to make vue mobile terminal implement pull-down refresh function. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics











Can the appdata folder be moved to the D drive? With the increasing popularity of computer use, more and more users' personal data and applications are stored on the computer. In Windows operating system, there is a specific folder called appdata folder, which is used to store user's application data. Many users wonder whether this folder can be moved to the D drive or other disks for data management and security considerations. In this article, we will discuss this problem and provide some solutions. First, let me

Microsoft changed the name of PhoneLink to MobileDevice in the latest Windows 11 version. This change allows users to control computer access to mobile devices through prompts. This article explains how to manage settings on your computer that allow or deny access from mobile devices. This feature allows you to configure your mobile device and connect it to your computer to send and receive text messages, control mobile applications, view contacts, make phone calls, view galleries, and more. Is it a good idea to connect your phone to your PC? Connecting your phone to your Windows PC is a convenient option, making it easy to transfer functions and media. This is useful for those who need to use their computer when their mobile device is unavailable

How to implement dual WeChat login on Huawei mobile phones? With the rise of social media, WeChat has become one of the indispensable communication tools in people's daily lives. However, many people may encounter a problem: logging into multiple WeChat accounts at the same time on the same mobile phone. For Huawei mobile phone users, it is not difficult to achieve dual WeChat login. This article will introduce how to achieve dual WeChat login on Huawei mobile phones. First of all, the EMUI system that comes with Huawei mobile phones provides a very convenient function - dual application opening. Through the application dual opening function, users can simultaneously

According to news on July 23, blogger Digital Chat Station broke the news that the battery capacity of Xiaomi 15 Pro has been increased to 6000mAh and supports 90W wired flash charging. This will be the Pro model with the largest battery in Xiaomi’s digital series. Digital Chat Station previously revealed that the battery of Xiaomi 15Pro has ultra-high energy density and the silicon content is much higher than that of competing products. After silicon-based batteries are tested on a large scale in 2023, second-generation silicon anode batteries have been identified as the future development direction of the industry. This year will usher in the peak of direct competition. 1. The theoretical gram capacity of silicon can reach 4200mAh/g, which is more than 10 times the gram capacity of graphite (the theoretical gram capacity of graphite is 372mAh/g). For the negative electrode, the capacity when the lithium ion insertion amount reaches the maximum is the theoretical gram capacity, which means that under the same weight

The programming language PHP is a powerful tool for web development, capable of supporting a variety of different programming logics and algorithms. Among them, implementing the Fibonacci sequence is a common and classic programming problem. In this article, we will introduce how to use the PHP programming language to implement the Fibonacci sequence, and attach specific code examples. The Fibonacci sequence is a mathematical sequence defined as follows: the first and second elements of the sequence are 1, and starting from the third element, the value of each element is equal to the sum of the previous two elements. The first few elements of the sequence

"Operation Delta" will launch a large-scale PC test called "Codename: ZERO" today (March 7). Last weekend, this game held an offline flash mob experience event in Shanghai, and 17173 was also fortunate to be invited to participate. This test is only more than four months away from the last time, which makes us curious, what new highlights and surprises will "Operation Delta" bring in such a short period of time? More than four months ago, I experienced "Operation Delta" in an offline tasting session and the first beta version. At that time, the game only opened the "Dangerous Action" mode. However, Operation Delta was already impressive for its time. In the context of major manufacturers flocking to the mobile game market, such an FPS that is comparable to international standards

How to implement the WeChat clone function on Huawei mobile phones With the popularity of social software and people's increasing emphasis on privacy and security, the WeChat clone function has gradually become the focus of people's attention. The WeChat clone function can help users log in to multiple WeChat accounts on the same mobile phone at the same time, making it easier to manage and use. It is not difficult to implement the WeChat clone function on Huawei mobile phones. You only need to follow the following steps. Step 1: Make sure that the mobile phone system version and WeChat version meet the requirements. First, make sure that your Huawei mobile phone system version has been updated to the latest version, as well as the WeChat App.

In today's software development field, Golang (Go language), as an efficient, concise and highly concurrency programming language, is increasingly favored by developers. Its rich standard library and efficient concurrency features make it a high-profile choice in the field of game development. This article will explore how to use Golang for game development and demonstrate its powerful possibilities through specific code examples. 1. Golang’s advantages in game development. As a statically typed language, Golang is used in building large-scale game systems.
