有赞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键问题，在换用列表插件后获得解决。