原生js仿寫(xiě)手機(jī)端下拉刷新
本文實(shí)例為大家分享了js仿寫(xiě)手機(jī)端下拉刷新的具體代碼,供大家參考,具體內(nèi)容如下
話(huà)不多說(shuō)先看效果圖:
當(dāng)下拉小于40px時(shí)顯示文字:
當(dāng)下拉大于40px時(shí)現(xiàn)實(shí)文字
松開(kāi)時(shí)顯示文字
實(shí)現(xiàn)原理
<div class="content"> <div class="left"></div> <div class="top"> <p id="p"></p> <div id="buttom"> </div> </div> </div>
CSS:
<style> * { margin: 0; padding: 0; box-sizing: border-box; } .content { width: 350px; height: 600px; position: relative; margin: 0 auto; } .top { width: 100%; height: 100%; background-color: #ccc; border: 12px solid black; border-radius: 10px; overflow: hidden; margin-top: 50px; border-top: 35px solid black; } #buttom { width: 100%; height: 100%; background-color: rgb(47, 196, 47); position: relative; padding: 10px; border-top: 2px solid red; } #p { display: inline-block; height: 30px; width: 100%; text-align: center; line-height: 30px; color: rgb(2, 2, 2); font-size: 15px; position: absolute; top: 40px; left: 0; display: none; } .left { height: 10px; width: 100px; background-color: #ccc; position: absolute; top: 12px; left: 110px; border-radius: 5px; } .left::after { display: inline-block; content: ""; width: 15px; height: 15px; background-color: #ccc; border-radius: 50%; position: absolute; left: 120px; top: -2px; } </style>
JS:
<script> var but = document.getElementById("buttom"); var p = document.getElementById("p"); var moveY = 0 //初始化按下時(shí)的位置 var tops = 0; //初始化tops。tops為下拉的距離 but.onmousedown = function(e) { //鼠標(biāo)按下事件 moveY = e.offsetY //獲取鼠標(biāo)按下時(shí)Y軸的位置 but.onmousemove = function(e) { //鼠標(biāo)移動(dòng)事件 p.innerHTML = "下拉刷新" p.style.display = "block"; //鼠標(biāo)移動(dòng)時(shí)現(xiàn)實(shí)提升文字并且讓文字為“下拉刷新” tops = e.offsetY - moveY //tops大小為鼠標(biāo)Y軸移動(dòng)的距離減去按下時(shí)的距離 if (tops < 0) { tops = 0 //阻止上拉 } else if (tops > 40) { //tops大于40時(shí)提示可以松開(kāi)鼠標(biāo)馬上刷新 p.innerHTML = "松開(kāi)立刻刷新" } this.style.top = tops + 'px'; //讓元素相對(duì)定位的top值等于tops的值 // console.log(tops) } but.onmouseup = function() { //鼠標(biāo)松開(kāi)事件 but.onmousemove = null //清空鼠標(biāo)移動(dòng)事件,阻止元素繼續(xù)跟著鼠標(biāo)移動(dòng) if (tops < 40) { //如果下拉距離b不足40px的話(huà),元素馬上復(fù)位不進(jìn)行刷新,并且提示文字消失 this.style.top = 0; p.style.display = "none" } else { //如果下拉距離大于40px提示正在刷新 p.innerHTML = "正 在 刷 新 . . ." setTimeout(() => { //延遲1.3秒后復(fù)位,這里做的只是模仿,實(shí)際項(xiàng)目需要在重新請(qǐng)求數(shù)據(jù)成功后復(fù)位 tops = 0 this.style.top = tops; p.style.display = "none" }, 1300); } } } </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于iscroll.js實(shí)現(xiàn)下拉刷新和上拉加載效果
- 純javascript實(shí)現(xiàn)簡(jiǎn)單下拉刷新功能
- vue.js移動(dòng)端app之上拉加載以及下拉刷新實(shí)戰(zhàn)
- vue.js整合vux中的上拉加載下拉刷新實(shí)例教程
- Javascript下拉刷新的簡(jiǎn)單實(shí)現(xiàn)
- JS 插件dropload下拉刷新、上拉加載使用小結(jié)
- iscroll.js的上拉下拉刷新時(shí)無(wú)法回彈的解決方法
- dropload.js插件下拉刷新和上拉加載使用詳解
- js仿手機(jī)頁(yè)面文件下拉刷新效果
- JS+CSS實(shí)現(xiàn)下拉刷新/上拉加載插件
相關(guān)文章
javascript實(shí)現(xiàn)的textarea運(yùn)行框效果代碼 不用指定id批量指定
今天在寫(xiě)一個(gè)網(wǎng)頁(yè)的時(shí)候用到了N多嵌套在textarea標(biāo)簽里的代碼,定義雙擊運(yùn)行其內(nèi)的代碼段。但是每次創(chuàng)建一個(gè)這樣的可運(yùn)行的實(shí)例都要給textarea元素自定義一個(gè)id值和寫(xiě)入雙擊事件,好不麻煩。2009-12-12原生js驗(yàn)證簡(jiǎn)潔注冊(cè)登錄頁(yè)面
這篇文章主要為大家詳細(xì)介紹了原生js驗(yàn)證簡(jiǎn)潔美觀注冊(cè)登錄頁(yè)面的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解
這篇文章主要介紹了Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05- 當(dāng)處理JavaScript字符串時(shí),有許多有趣的技巧可以提高你的編碼效率,這篇文章將介紹一些有關(guān)JavaScript字符串的技巧,讓你在字符串操作方面更加?jì)故?/div> 2023-10-10
微信 jssdk 簽名錯(cuò)誤invalid signature的解決方法
這篇文章主要介紹了微信 jssdk 簽名錯(cuò)誤invalid signature的解決方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01最新評(píng)論