Vue3项目中页面滚动加载更多的原生操作

效果:数据未回来就是加载中,加载数据完成后就会显示没有更多的数据了Vue3项目中页面滚动加载更多的原生操作_第1张图片Vue3项目中页面滚动加载更多的原生操作_第2张图片

 

 步骤一,定义无限下拉的商品组件:xtx-infinite-loading.vue

使用了vueuse中的useIntersectionObserve来监听是否达到了可视化界面中,如果到达了界面,就像父组件传自定义属性load通知父组件做接下来的操作






步骤二:接口数据需要的参数中有pagesize,pape,都不是必须填的,但是categoryId是必填的,使用route.params.id获取地址栏的id值

父组件:(父组件给子组件传值,loading=true是正在加载中,false是获取到接口的数据;finished=true是所有的数据已经全部加载完毕,没有数据可以加载了,false是还有数据;onLoad子组件传过来的自定义事件)





 GoodsItem组件:





你可能感兴趣的:(Vue3,前端,vue.js,html5,javascript)