Vant的List组件列表 滑动后不触底也发送请求的Bug

时间:2022-11-25 07:56:34


????目录跳转

  • ​​????简介:​​
  • ​​????页面效果:​​
  • ​​????使用Float:​​
  • ​​???? 问题:​​
  • ​​????div 转为行内块 (解决)​​
  • ​​????总结:​​

????简介:

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

Vant的List组件列表 滑动后不触底也发送请求的Bug


Vant的List组件列表 滑动后不触底也发送请求的Bug

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

Vant的List组件列表 滑动后不触底也发送请求的Bug

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

Vant的List组件列表 滑动后不触底也发送请求的Bug

????页面效果:

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

Vant的List组件列表 滑动后不触底也发送请求的Bug

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

????使用Float:

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

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

Vant的List组件列表 滑动后不触底也发送请求的Bug

???? 问题:

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

Vant的List组件列表 滑动后不触底也发送请求的Bug

????div 转为行内块 (解决)

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

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

Vant的List组件列表 滑动后不触底也发送请求的Bug

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

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

Vant的List组件列表 滑动后不触底也发送请求的Bug

????总结:

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