亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

詳解vue移動(dòng)端 下拉刷新

inapt / 444人閱讀

摘要：看完這篇文章，相信大伙也一樣可以，做出一個(gè)自己的刷新，加載的組件說這個(gè)功能之前，大家要先了解一下，要怎么觸發(fā)滾動(dòng)條事件。下篇文章會(huì)講怎么實(shí)現(xiàn)一個(gè)橫向滾動(dòng)條接入正題先來看看怎么剖析這個(gè)下拉刷新。

看完這篇文章，相信大伙也一樣可以，做出一個(gè)自己的刷新，加載的組件

說這個(gè)功能之前，大家要先了解一下，要怎么觸發(fā)滾動(dòng)條事件。

一定要注意，所有滾動(dòng)事件都必須要滿足這個(gè)條件，橫向滾動(dòng)條也一樣，

只要滿足子元素寬度大于父元素寬度就可以了。（下篇文章會(huì)講怎么實(shí)現(xiàn)一個(gè)橫向滾動(dòng)條）

接入正題?。?！

先來看看怎么剖析這個(gè)下拉刷新。

要用到的移動(dòng)端的三個(gè)事件： touchstart(手指按下)，touchmove（手指移動(dòng)），touchend（手指離開）

下拉刷新也就是（touchstart => touchmove(下移動(dòng)) =>touchend）的一個(gè)過程

大體思路：

   下拉主要與手指觸摸y軸點(diǎn)有關(guān)

   1.記錄下手指按下y軸的坐標(biāo)點(diǎn)

   2.記錄手指移動(dòng)時(shí)，移動(dòng)的距離（注意：要判斷手指是向上移還是向下移，向上移就是滾動(dòng)）

   3.啟動(dòng)下拉刷新事件

看代碼：

　　vue中要在methods里面注冊(cè)事件，在綁定到父元素上，這里大家應(yīng)該都是用vue-cli搭建的項(xiàng)目了吧！

沒有的話，我回頭給個(gè)鏈接給大家，里面有已經(jīng)搭建好的項(xiàng)目結(jié)構(gòu)。包含這個(gè)插件的源碼，demo都在里面

到這里就完結(jié)了，當(dāng)然現(xiàn)在肯定不能直接用的，要結(jié)合你的實(shí)際業(yè)務(wù)邏輯來用的，

我把demo放到github上了 ：

https://github.com/1372510279...

看不懂的，建議整個(gè)項(xiàng)目拉下拉，跑一下，里面還有檢驗(yàn)的插件，彈窗的等等，都是我在項(xiàng)目中用到，再抽出來的。

方法： git clone https://github.com/1372510279...

同時(shí)，也歡迎各位提提 issues，或者各位想擴(kuò)展一些其它的插件都可以。

最后，別忘了給個(gè)star！與君互勉，一起啃磚！

下一篇就講怎么做這個(gè)滾動(dòng)加載?。。?/p>

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/94487.html

相關(guān)文章

  • 實(shí)現(xiàn)移動(dòng)端上拉加載和下拉刷新的vue插件(mescroll.js)

    摘要：做一個(gè)簡(jiǎn)單的移動(dòng)端展示項(xiàng)目，后臺(tái)分頁后前端加載，實(shí)現(xiàn)上拉加載下一頁，找了下，還是用這個(gè)插件好一點(diǎn)安裝不要使用安裝導(dǎo)入在哪個(gè)頁面使用則在哪個(gè)頁面導(dǎo)入這里的話，我使用全局導(dǎo)入會(huì)出現(xiàn)問題若有錯(cuò)還請(qǐng)大家指出暫時(shí)想到的就是局部引入注冊(cè)組件注冊(cè)組件 做一個(gè)簡(jiǎn)單的移動(dòng)端展示項(xiàng)目，后臺(tái)分頁后前端加載，實(shí)現(xiàn)上拉加載下一頁，找了下，還是用這個(gè)mescroll.js插件好一點(diǎn) 1.npm安裝 npm ins...

    hightopo 評(píng)論0 收藏0

  • 下拉刷新，上拉加載插件mescroll源碼分析

    摘要：最近項(xiàng)目要求增加一個(gè)下拉刷新的功能，自己也試著寫了一個(gè)，單總是有點(diǎn)卡頓。 最近項(xiàng)目要求增加一個(gè)下拉刷新的功能，自己也試著寫了一個(gè)，單總是有點(diǎn)卡頓。 于是學(xué)習(xí)了下別人的插件（ps : 既然寫不出好插件，就要會(huì)學(xué)習(xí)別人的）： 官網(wǎng)github地址：https://github.com/mescroll/m... 1.整體預(yù)發(fā)結(jié)構(gòu) ;(function(name, definition) {...

    frontoldman 評(píng)論0 收藏0

  • 下拉刷新，上拉加載插件mescroll源碼分析

    摘要：最近項(xiàng)目要求增加一個(gè)下拉刷新的功能，自己也試著寫了一個(gè)，單總是有點(diǎn)卡頓。 最近項(xiàng)目要求增加一個(gè)下拉刷新的功能，自己也試著寫了一個(gè)，單總是有點(diǎn)卡頓。 于是學(xué)習(xí)了下別人的插件（ps : 既然寫不出好插件，就要會(huì)學(xué)習(xí)別人的）： 官網(wǎng)github地址：https://github.com/mescroll/m... 1.整體預(yù)發(fā)結(jié)構(gòu) ;(function(name, definition) {...

    ztyzz 評(píng)論0 收藏0

  • 移動(dòng)端下拉刷新、上拉加載之vueScroll

    摘要：移動(dòng)端開發(fā)，處理列表翻頁和數(shù)據(jù)的時(shí)候，下拉刷新和上拉加載應(yīng)用的比較廣泛，今天給大家推薦一個(gè)的插件，，首先上圖話不多說，上代碼了一引入并使用二在或者組件里面使用三在文件里面操作插件首先在在里面寫上方法在里面實(shí)現(xiàn)申明好然后繼續(xù)在里面寫上刷新和 移動(dòng)端開發(fā)，處理列表翻頁和數(shù)據(jù)的時(shí)候，下拉刷新和上拉加載應(yīng)用的比較廣泛，今天給大家推薦一個(gè)vue的插件，vueScroll，首先上圖： showIm...

    張漢慶 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<