vue實現下拉加載根本沒那么復雜

wh469012917 發布于2019-08-26 10:44 / 1938人閱讀

摘要：一直不知道上拉加載，下拉刷新是怎么實現的。現在正好有個產品有這樣一個需求。我只是需要實現一個下拉加載，不需要其他這么多的功能。看了看其他人的源碼，直接擼了起來，實現一個組件。

之前缺乏移動端的經驗。一直不知道上拉加載，下拉刷新是怎么實現的。現在正好有個產品有這樣一個需求。想了一會沒有思路。就去找插件。啥vue-infinite-scroll，vue-virtual-scroll-list。啊呀，牛!無限滾動，十萬條數據渲染。

經過我一大圈的折騰。還是默默的卸載了插件。我只是需要實現一個下拉加載，不需要其他這么多的功能。看了看其他人的源碼，直接擼了起來，實現一個List組件。

效果展示

MList.vue

使用組件


      
        
      


  private dataList: any[] = [1, 2, 3, 4, 5, 6, 7, 8];
  private loading: boolean = false;
  private fetchNewData() {
    this.loading = true;
    setTimeout(() => {
      this.dataList.push(1, 2, 3);
      const ref: any = this.$refs.vueLoad;
      this.loading = false;
    }, 1000);
  }

這里需要注意的是m-list的父容器一定要固定高度，本例為body。

GPU云服務器云服務器沒那么簡單下拉加載動畫下拉加載更多 jquery下拉加載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106683.html

加推Weex實踐之路（上）

摘要：我們參考小程序的設計思路進行了優化升級，為每一個需要特有化配置的頁面添加一個格式的配置文件，配置文件包括導航欄的配置頁面級別的配置跳轉的配置等，將配置工程化標準化。設置導航欄按鈕包含按鈕樣式的數組通過完成按鈕事件的回調。一、背景1.為什么是Weex在公司快速發展的大環境下，App的更新迭代高速、高頻，技術團隊平均兩周便可誕生一款中型App，但App團隊只有6個人（iOS 、Android各3...

shuibo 2019-05-22 19:43 評論0 收藏0
Hello Vue: Vue快速入門教程

摘要：快速入門教程，此教程包括使用的組件。的核心是能夠使用簡單的模板語法以聲明方式將數據呈現給。到目前為止，它看起來并沒有太大的不同。如果我們點擊下拉菜單，我們會得到兩個選擇或。在下拉菜單中選擇不同的選項，上面的文本也將相應的發生變化。 Vue快速入門教程，此教程包括使用Kendo UI for Vue的組件。希望通過此教程能夠成為你學習vue的一個很好的起點。這其中還包含一個可擴展的事例，...

Pines_Cheng 2019-08-29 16:29 評論0 收藏0
Hello Vue: Vue快速入門教程

摘要：快速入門教程，此教程包括使用的組件。的核心是能夠使用簡單的模板語法以聲明方式將數據呈現給。到目前為止，它看起來并沒有太大的不同。如果我們點擊下拉菜單，我們會得到兩個選擇或。在下拉菜單中選擇不同的選項，上面的文本也將相應的發生變化。 Vue快速入門教程，此教程包括使用Kendo UI for Vue的組件。希望通過此教程能夠成為你學習vue的一個很好的起點。這其中還包含一個可擴展的事例，...

RdouTyping 2019-08-26 12:18 評論0 收藏0
Hello Vue: Vue快速入門教程

摘要：快速入門教程，此教程包括使用的組件。的核心是能夠使用簡單的模板語法以聲明方式將數據呈現給。到目前為止，它看起來并沒有太大的不同。如果我們點擊下拉菜單，我們會得到兩個選擇或。在下拉菜單中選擇不同的選項，上面的文本也將相應的發生變化。 Vue快速入門教程，此教程包括使用Kendo UI for Vue的組件。希望通過此教程能夠成為你學習vue的一個很好的起點。這其中還包含一個可擴展的事例，...

DoINsiSt 2019-08-02 11:18 評論0 收藏0
詳解vue移動端下拉刷新

摘要：看完這篇文章，相信大伙也一樣可以，做出一個自己的刷新，加載的組件說這個功能之前，大家要先了解一下，要怎么觸發滾動條事件。下篇文章會講怎么實現一個橫向滾動條接入正題先來看看怎么剖析這個下拉刷新。看完這篇文章，相信大伙也一樣可以，做出一個自己的刷新，加載的組件說這個功能之前，大家要先了解一下，要怎么觸發滾動條事件。showImg(https://segmentfault.com/img...

inapt 2019-08-22 16:35 評論0 收藏0