有赞下拉菜单html,有赞vant-ui Tabs、List、PullRefresh组件实践

Vant ui + Vue.js 部分组件实践

功能需求是实现一个移动端的栏目列表切换，于此同时列表需要进行下拉刷新，上拉加载

如下图，大概是一个这样的东西

看起来是挺简单的，实现起来很方便。没错，我当时也是这么想的，结果满心欢喜就开始在前一个前端写好的的vantui 基本结构下开始编写代码。

代码如下,当然这是我已经修改过的代码。

v-model="newsIsRefreshing"

@refresh="onNewsRefresh">

v-show="!showVoid_b"

:offset="300"

v-model = "newsLoading"

:finished = "newsFinished"

@load = "getNews"

style = "padding-bottom: 2rem;"

v-for = "(item, index) in news_list"

:listInfo = "item"

:key = "index"

:activeIndex = "active"

style = "margin: .5rem;"

下面来说说遇到的一些坑

引入一个空列表组件，由于html结构使用不当，导致展示出现问题。建议，每个tab栏目下放一个空列表组件，将空组件放在下拉刷新组件里面。

莫名其妙的就请求了一次数据接口。这个是由于List上拉加载导致的，需要理清楚loading、finish、offset这两个参数的使用，什么时候加载中，什么时候结束加载。finish是停止请求的开关。offset是请求开关打开后判断是否请求的标准。由于暂时不知名的坑，部分测试的安卓机在APP里面打开用相同的参数请求两次，我的解决办法是，根据pageSize和pageIndex用splice方法进行替换，就算你连续请求三次但是我每次都给你替换掉。

下拉刷新请求两次。下拉刷新一般是清空现有列表然后请求一次数据接口和上拉加载的接口一样，请求前把pageIndex置为零。请求结束后必须把下拉刷新绑定的isLoading置为false，要不然又会多请求一次.

魅族手机按home键返回桌面，再重新回到APP后列表上下划不动。这个暂时没找到解决方案，个人觉得是webview在退出后，再返回插件获取高度失败导致滑动被锁死。

vant-ui 的tab和列表组件连用，会对数据进行缓存，建议不要在改变tab的时候强制去请求一次，会出现数据重复的问题。

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

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

2019年3月

因为有部分机型不兼容，所以把这块功能重构了，发现之前的思路存在一定问题。其实完全可以只使用一个列表盒子，缓存可以用vuex 或者localStorage，看具体的需求。魅族的返回home键问题，在换用列表插件后得到解决。

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

2019年11月

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

有赞下拉菜单html,有赞vant-ui Tabs、List、PullRefresh组件实践相关推荐

有赞下拉菜单html,python selenium自动上传有赞单号的操作方法
思路 1.将姓名和单号填入excel表格里面 2.读取excel表格,将所有姓名存到ExeclName这个list中,单号存到ExeclId 3.selenium自动根据姓名搜索,点击发货代码 # ...
Bootstrap 下拉菜单和按钮
一.下拉菜单: 用于显示链接列表的可切换.有上下文的菜单 .dropdown 菜单用于指定下拉菜单,下拉菜单都包裹在 .dropdown 或者 .dropup 里. .dropdown-menu 类用 ...
unity代码获取dropdown_Unity3D UGUI下拉菜单/Dropdown组件用法、总结
Unity3D中UGUI实现下拉菜单本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人! (拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar - ...
15个精心挑选的 jQuery 下拉菜单制作教程
下拉菜单是网站导航常用的表现形式之一,能够呈现更多的导航内容.如果网站能够设计出有吸引力的网站导航,将会吸引更多的用户去浏览网站的内容.今天本文就为大家挑选了25个非常好的 jQuery 下拉菜单制作 ...
WPF 用Popup做下拉菜单
今天无聊时看到必应搜索首页的菜单挺好,于是想着模仿一下..写着写着发现和我之前做的一个MenuItem很像,干脆直接拿来用了... 看看效果: 上图是bing.com首页右上角的下拉菜单,今天就来做了 ...
vba下拉框实现记忆功能_VBA | 这个二级下拉菜单挺有趣！
我的目标:让中国的大学生走出校门的那一刻就已经具备这些office技能,让职场人士能高效使用office为其服务.支持我,也为自己加油! 前面章节我们讲过了表单控件和ActiveX控件的区别,知道了A ...
ueditor添加下拉事件_Excel中最智能的三级下拉菜单！
我的目标:让中国的大学生走出校门的那一刻就已经具备这些office技能,让职场人士能高效使用office为其服务.支持我,也为自己加油! 关于制作下拉菜单的方法,我以前也写过, 比如用公式制作下拉菜单 ...
前端常用事件案例——抽名字（抽奖）/搜索下拉菜单/微博文本框
目录抽名字(抽奖) 搜索下拉菜单微博文本框进阶微博案例抽名字(抽奖) 实现效果是:点击开始按钮,则方框不断显示名字,点击停止,抽到的人名就是谁,并且删除,继续直到抽完后禁用按钮 ①点击开始按钮 ...
下拉菜单与轮播图的实现
下拉菜单与轮播图的实现目录下拉菜单与轮播图的实现一.折叠菜单二.轮播图的实现三.简单网页界面(具有轮播图效果) 一.折叠菜单 <body><a href="#co ...

有赞下拉菜单html,有赞vant-ui Tabs、List、PullRefresh组件实践

有赞下拉菜单html,有赞vant-ui Tabs、List、PullRefresh组件实践相关推荐

最新文章

热门文章