# Vue 中实现上滑加载下拉刷新功能

665 阅读1分钟

Vue 中实现上滑加载下拉刷新功能

1.公共组件

  • 组件名:fixscroll

    • 使用的cubeui中的 cube-scroll UI组件

fixscroll.png

  • 在组件中使用

    • 首先在父组件中引入fixscroll组件

父组件引用.png

  • 默认在data中autoHeight为 0

  • 要计算autoHeight初始高度

mounted计算高度.png

  • 其中129怎样计算得来的?

    这个组件的滑框的高度以上内容的高度可能,因为不一定从顶部开始可以滑,在中部或者下面进行滑动的时候需要计算滑框以上的高度

  • 按钮切换让滑动框内容强制回到顶端(如过加载数据的时候使用了分页强制回到顶部需要将page Num设置为1)

按钮切换时让内容强制回到顶端.png

  • 强制让下拉刷新图案收回去

强制结束下拉刷新团退不回去.png

  • Demo 掩饰(isLoadMore显示是否加载更多,为false继续加载,true为加载完毕)

demo.png

\