JavaScript บริสุทธิ์ใช้ฟังก์ชั่นรีเฟรชแบบดึงลงอย่างง่าย

รหัสนั้นง่ายมาก แต่ฟังก์ชั่นที่นำไปใช้นั้นใช้งานได้จริงมาก เพียงแสดงรหัส

CSS:

การคัดลอกรหัสมีดังนี้:

<meta charset = "utf-8" />

<title> pull to Refresh </title>

<meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ความสูง = ความสูงของอุปกรณ์, inital-scale = 1.0, ระดับสูงสุด = 1.0, ผู้ใช้-scalable = no;" -

<style>

Div {

ตำแหน่ง: สัมบูรณ์;

ด้านบน: 0px;

ด้านล่าง: 0px;

ความกว้าง: 100%;

ซ้าย: 0px;

ล้น: ซ่อน;

-

หลี่ {

ประเภทรายการประเภท: ไม่มี;

ความสูง: 35px;

ความเป็นมา: #CCC;

ขอบด้านล่าง: Solid 1px #FFF;

TEXT-ALIGN: ซ้าย;

ความสูงของสาย: 35px;

Padding-Left: 15px;

-

ul {

ความกว้าง: 100%;

ระยะขอบด้านบน: 0px;

ตำแหน่ง: สัมบูรณ์;

ซ้าย: 0px;

Padding: 0px;

ด้านบน: 0px;

-

</style>

html:

การคัดลอกรหัสมีดังนี้:

<div>

<ul class = 'scroll'>

<li> 1 </li>

<li> 2 </li>

<li> 3 </li>

<li> 4 </li>

<li> 5 </li>

<li> 6 </li>

<li> 7 </li>

<li> 8 </li>

<li> 9 </li>

<li> 10 </li>

<li> 1 </li>

<li> 2 </li>

<li> 3 </li>

<li> 4 </li>

<li> 5 </li>

<li> 6 </li>

<li> 7 </li>

<li> 8 </li>

<li> 9 </li>

<li> 10 </li>

</ul>

</div>

<script>

var scroll = document.querySelector ('. Scroll');

var outerscroller = document.QuerySelector ('. OutersCroller');

var touchstart = 0;

var touchdis = 0;

Outerscroller.addeventListener ('TouchStart', ฟังก์ชั่น (เหตุการณ์) {

var touch = event.targetTouches [0];

// ใส่องค์ประกอบที่นิ้วของคุณอยู่

touchStart = touch.pagey;

console.log (TouchStart);

}, เท็จ);

Outerscroller.addeventListener ('TouchMove', ฟังก์ชั่น (เหตุการณ์) {

var touch = event.targetTouches [0];

console.log (touch.pagey + 'px');

scroll.style.top = scroll.offsettop + touch.pagey-touchstart + 'px';

console.log (scroll.style.top);

touchStart = touch.pagey;

touchdis = touch.pagey-touchstart;

}, เท็จ);

Outerscroller.addeVentListener ('Touchend', ฟังก์ชั่น (เหตุการณ์) {

TouchStart = 0;

var top = scroll.offSettop;

console.log (บนสุด);

ถ้า (บนสุด> 70) รีเฟรช ();

ถ้า (บนสุด> 0) {

var time = setInterval (ฟังก์ชัน () {

scroll.style.top = scroll.offsettop -2+'px';

if (scroll.offSettop <= 0) ClearInterval (เวลา);

}, 1)

-

}, เท็จ);

ฟังก์ชั่นรีเฟรช () {

สำหรับ (var i = 10; i> 0; i--)

-

var node = document.createElement ("li");

node.innerhtml = "ฉันใหม่";

Scroll.insertbefore (Node, Scroll.firstchild);

-

-

</script>

ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้ JavaScript