有赞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的时候强制去请求一次，会出现数据重复的问题。

本文用于上周实践总结，有说的不对的欢迎指出