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

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

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

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

看起來是挺簡單的，實現起來很方便。沒錯，我當時也是這麼想的，結果滿心歡喜就開始在前一個前端寫好的的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鍵問題，在換用列表插件後獲得解決。