📚简介：

       Vant的List组件列表+PullRefresh 组件实现下拉刷新和List列表滑动屏幕到底部时发送请求效果。

       把van-list和van-pull-refresh添加成组件，由于改需求在许多页面都可以使用到,组件名称提取为refresh-pro-list，list是传递的商品集合，在通过插槽的显示由父页面来定义渲染的样式

这个插槽是使用for把商品集合遍历，并且每个div一个商品

🎉页面效果：

       但是这会有个问题是他是一个一个div拼接起来的所以下拉触底后第二个请求也正常发送了。

但是页面只有一列数据显然是不行的我们要的效果是2列商品数据。

💭使用Float:

       div的话我第一想到的就是Float(浮动)，这样商品就会贴合，我们只要稍微改改样式就可以。

       修改代码：在原有的div样式添加float:left可以看出已经有效果了，但是我发现新问题出现了。

🧐 问题：

       当我轻轻滑动屏幕，请求后端的接口就发送了好多条，我就是想是不是因为浮动的原因导致van-list无法识别底部所以才多次发送请求获取数据。

🔭div 转为行内块 （解决）

       那既然是浮动影响到，你们我的需求就是后面的商品展示成2列那么用其他方式可以满足需求也是OK的。我们可以把，div 转为行内块 这样2个div也可以同行显示display: inline-block;

修改代码：在原有的div样式添加display: inline-block; 可以看出已经有效果了。

我们在看看会不会有Float下拉不触底发送多个请求的问题。

       我已下拉好多次但是请求并没有像之前那个问题碰一下屏幕发送一条请求的问题。

🏆总结：

       我们可以使用把div转为行内块这样我们也可以完成需求，只要不出问题的方案就是好方案。