1.背景：移动端实现列表展示，整体布局底部tab，顶部搜索区，中间列表数据展示。
2.遇到的问题：
（1）下滑列表数据，始终不出现加载中样式且滑到底部会多次触发load事件
（2）一进入页面就会自动触发load事件
（3）切换底部tab会触发两次load事件
（4）关键字搜索下拉列表到【无更多数据】，删除关键字后，下拉不触发load方法
（5）快速的切换底部两个tab，在多个接口都返回数据后，发现重复pageNum为1的数据
3.解决方法以及分析
（1）这个问题是布局没搞好，首先将整个页面分为上中下部分，然后中间部分是通过calc计算好了高度，直接写了list组件，问题出错就在这里，改成在list外面再套一层div，设置height：100%；overflow-y: auto，问题就解决了。
（2）这个问题是因为list组件本身有初始化时立即执行滚动位置检查属性immediate-check，默认为true，若又在生命周期调用初始化数据方法就会调用两次。那解决办法就是二者取一。
（3）这个问题的原因，也查了资料，具体没仔细get，解决办法就是，切换的时候，将list组件v-model的loading变量置为true，然后调用接口请求数据，数据返回后再将loading变量置为false。
（4）解决办法：点击搜索/切换tab需要将list组件绑定的finished变量置为false，就是回到初始值。另外补充，【无更多数据】展示，接口返回数据后，在处理完list循环数据赋值或追加后，判断list循环数据的长度和接口返回的totalSize，相等则将list组件绑定的finished变量置为true。
（5）解决办法：在接口返回数据后，判断pageNum为1时，直接赋值list循环数据，其他再追加数据。
移动端Vant2 List组件的使用和踩坑
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 1、 github排名 https://github.com/trending,github搜索：https://...
