有贊vant-ui Tabs、List、PullRefresh元件實踐

風吹一個大耳東發表於2018-08-21
UI元件

Vant ui + Vue.js 部分元件實踐

功能需求是實現一個移動端的欄目列表切換，於此同時列表需要進行下拉重新整理，上拉載入

如下圖，大概是一個這樣的東西

clipboard.png

看起來是挺簡單的，實現起來很方便。沒錯，我當時也是這麼想的，結果滿心歡喜就開始在前一個前端寫好的的vantui 基本結構下開始編寫程式碼。

程式碼如下,當然這是我已經修改過的程式碼。

<div v-show="active===1">
    <div class="newsblock">  
    <PullRefresh
      v-model="newsIsRefreshing"
      @refresh="onNewsRefresh">
      <VoidList v-show="showVoid_b"></VoidList>
      <List
      v-show="!showVoid_b"
      :offset="300"
        v-model = "newsLoading"
        :finished = "newsFinished"
        @load = "getNews"
        style = "padding-bottom: 2rem;"
      >
        <LooksCard
          v-for = "(item, index) in news_list"
          :listInfo = "item"
          :key = "index"
          :activeIndex = "active"
          style = "margin: .5rem;"
        ></LooksCard>
      </List>
    </PullRefresh>
  </div>

下面來說說遇到的一些坑

  1. 引入一個空列表元件，由於html結構使用不當，導致展示出現問題。建議，每個tab欄目下放一個空列表元件，將空元件放在下拉重新整理元件裡面。
  2. 莫名其妙的就請求了一次資料介面。這個是由於List上拉載入導致的，需要理清楚loading、finish、offset這兩個引數的使用，什麼時候載入中，什麼時候結束載入。finish是停止請求的開關。offset是請求開關開啟後判斷是否請求的標準。由於暫時不知名的坑，部分測試的安卓機在APP裡面開啟用相同的引數請求兩次，我的解決辦法是，根據pageSize和pageIndex用splice方法進行替換，就算你連續請求三次 但是我每次都給你替換掉。
  3. 下拉重新整理請求兩次。下拉重新整理一般是清空現有列表然後請求一次資料介面和上拉載入的介面一樣，請求前把pageIndex置為零。請求結束後必須把下拉重新整理繫結的isLoading置為false，要不然又會多請求一次.
  4. 魅族手機按home鍵返回桌面，再重新回到APP後 列表上下劃不動。這個暫時沒找到解決方案，個人覺得是webview在退出後，再返回外掛獲取高度失敗導致滑動被鎖死。
  5. vant-ui 的tab和列表元件連用，會對資料進行快取，建議不要在改變tab的時候強制去請求一次，會出現資料重複的問題。

本文用於上週實踐總結，有說的不對的歡迎指出

--------------------------------------------------分割線----------------------------------------------

2019年3月
因為有部分機型不相容，所以把這塊功能重構了，發現之前的思路存在一定問題。其實完全可以只使用一個列表盒子，快取可以用vuex 或者localStorage，看具體的需求。魅族的返回home鍵問題，在換用列表外掛後得到解決。

相關文章