有赞vant-ui Tabs、List、PullRefresh组件实践

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键问题,在换用列表插件后得到解决。

--------------------------------------------------分割线----------------------------------------------

2019年11月
由于最近访问较多,提醒一下。vant ui中的list组件加载数据,*不需要在引入list的组件中的mounted和created中调用获取数据请求


知识点复习
提供一些前端知识的经验总结,个人复习专用,如果帮到你点个赞

钻到底~

400 声望
28 粉丝
0 条评论
推荐阅读
Cornerstone.js 介绍 (持续更新)
JS编写的医疗DICOM影像浏览工具,用来支持医学影像的显示与交互。他的作用和他的名字一样基石,很多医疗的影像阅片系统都是基于cornerstone.js开发的,如OHIF Viewer、Lesion Tracker等,目前国内医疗大部分结合A...

风吹一个大耳东3阅读 8.5k评论 5

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -&gt; Preference-&gt; Settings(如果装了中文插件包应该是 文件 -&gt; 选项 -&gt; 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城32阅读 7.3k评论 5

封面图
vue UI框架比较
最好基于vue2.0PC端:因为用过的是饿了么UI,所以比较以饿了么UI为基础element UI 饿了么UI支持vue2.x80分优点:组件的API方法、属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观N3 N3支持vue2.x70分优点:...

chinawzc22阅读 39.9k评论 17

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco24阅读 2.2k评论 3

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.8k评论 3

封面图

钻到底~

400 声望
28 粉丝
宣传栏