Shulou(Shulou.com)06/02 Report--

This article shows you how native js can achieve more pull-down refresh and pull-up loading. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

What is JavaScript JS is the abbreviation of JavaScript, it is a literal scripting language, its interpreter is called JavaScript engine, is a part of the browser, mainly used for web development, can add a variety of dynamic effects to the website, make the web page more beautiful.

1. Drop-down refresh

Since native js has been out of use for too long, here is a list of the pre-knowledge points involved here:

Mobile touch screen events: touchstart (the moment the finger is pressed), touchmove (when the finger moves on the screen), touchend (when the finger is released)

Coordinates of fingers on the page: pageX,pageY

Before writing, you should first understand the principle. The essence of drop-down refresh is that the user pulls up to a certain distance at the top of the page to trigger data refresh.

There are a few points that need to be done:

1. Record the position of the finger when the finger is pressed (touchstart)

two。 When the finger slips (touchmove) calculates the difference between the coordinates of the finger and the initial position when the finger is pressed to get the distance of the slide, so that the container moves in the direction of the finger slide (translateY) corresponding to the distance of the difference, corresponding to a maximum distance that allows the user to slide, so as to prevent the page from being pulled down too long.

3. When the finger is released (touchend), it determines whether the slipping difference reaches the expected value to refresh the data and rebound loading.

Less word,show me the code...

Document * {margin: 0; padding: 0; list-style: none;} .container {/ * move 60px up to hide the loading box until the drop-down shows * / position: relative; top:-100px } .container .loading {text-align: center; height: 100px; line-height: 100px;} .container .list {border: 1px solid # 666;} .container .list li {line-height: 80px } .container .list li:nth-child (2n) {background-color: # ccc } drop-down refresh I am the content I am the content Content. I'm content. / / scroll container const container = document.querySelector ('.container') / / loading text container const span = container.querySelector ('span'); let startPosition = 0 position / start position of drop-down let distance = 0 role / difference in drop-down distance / / container.addEventListener when finger is pressed (' touchstart', function (e) {/ / reset loading text span.textContent = 'drop-down refresh' on the next drop-down after rebound / / record the start position startPosition = e.touches [0] .pageY;}) / / container.addEventListener ('touchmove', function (e) {/ / calculate the pull-down difference const currentPosition = e.touches [0] .pageY; / / calculate the difference between the pull-down and the start position distance = currentPosition-startPosition / / if the drop-down difference reaches, the prompt can let go of the specific value reached. Here is the pull-down area height if (distance > 100) {/ / the case takes 100 as the critical value. If the distance exceeds 100, prompt to release refresh span.textContent = 'release refresh'. } / / limit the maximum decline to 120. if you exceed the limit, you will no longer decline if (distance).

< 120) { // 容器的这个下滑是瞬时的 取消过渡效果 this.style.transition = 'transform 0s'; this.style.transform = `translateY(${distance}px)` } }) // 手指松开时 container.addEventListener('touchend', function (e) { // 回弹的动作可以给个1s的过渡效果 this.style.transition = 'transform 1s'; // 如果下拉差值并没有达到 则直接回弹 if (distance >

0 & & distance

< 100) { this.style.transform = `translateY(0px)` return; } if (distance >

100) {/ / display refresh as soon as the drop-down difference reaches, and temporarily freeze it at this location this.style.transform = 'translateY (100px) `; span.textContent =' refreshing' / / wait for the data to come back and show that the refresh succeeded for 1s, and then bounce back here. The entire drop-down has been executed setTimeout (()) = > {/ / setTimeout simulation asynchronous request real development. Here is a promise request span.textContent = "refresh successful". / / this setTimeout lets the refresh display successfully for one second and then bounce back setTimeout (() = > {this.style.transform = `translateY (0px) `}, 1000)}, 2000);} / / reset the difference distance = 0 after a pull-down ends;})

The effect is shown in the figure:

two。 Pull up and load

Pre-js knowledge points: three dom attributes

* clientHeight: the height of the visible area of an element without a border

* scrollTop: the distance rolled up when the element is scrolled

* scrollHeight: the actual height of the element, including the height to be rolled up

Once you know the above three attributes, you have a formula:

ClientHeight + scrollTop = true height of the element-trigger loading more if ((this.clientHeight + this.scrollTop) > = this.scrollHeight-50) {setTimeout (() = > {/ / here is an asynchronous data loading operation console.log ('load more')}, 1000);}}, 700)

The effect is as shown in the figure:

The above is how the native js implements drop-down refresh and pull-up load more. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.