vue移动端|vue封装（上拉加载更多数据）组件前端|封装组件

根据输入内容，去后台查询相关数据，每次返回20条数据，滑动到底部时增加索引（即页数）再去后台查询数据，将返回数据拼接在原数组后面。
【vue移动端|vue封装（上拉加载更多数据）组件】1、封装组件

> //封装的调用后台的查询接口方法 import { queryMaterial } from '@/api/serve' export default { props: { //禁用状态 disabled: { type: Boolean, default: false }, //表单的label名 title: { type: String, default: '' }, //绑定值 name: { type: String, default: '' } },data() { return { dataList: [], showPopup: false, pageIndex: 1, pageSize: 20 } }, methods: { queryData() { const temp = { name: this.name, pageIndex: this.pageIndex, pageSize: this.pageSize } queryMaterial(temp).then(res => { //将返回的res数据拼接在dataList后面 this.dataList = [...this.dataList, ...res] this.showPopup = true console.log(res, '搜索返回值this.dataList==>', this.dataList) }) }, // 给父组件传值将选择的数据传递给父组件 clickMaterial(data) { this.$emit('selectMaterial', data) }, //监听滚动事件 doButtom() { // Element.scrollTop：元素内容垂直滚动的像素值 // Element.clientHeight：元素可见区域的整个的高度 // Element.scrollHeight：这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容 if (this.$refs.materialUl.scrollTop + this.$refs.materialUl.clientHeight === this.$refs.materialUl.scrollHeight) { console.log('触底了') //判断是否已经加载完了全部数据，如果已经加载了全部数据则不再去请求接口获取数据 if (this.materialList.length < this.pageIndex * 20) return this.pageIndex++ this.queryMaterial() } } } } ='scss' scoped> ul{ height:500px; overflow-y: scroll; font-size: 0.44rem; list-style: none; padding-inline-start: 0; margin-block-start: 0; margin-block-end: 0; li{ display: block; padding: 0.285714rem; border-bottom: 1px solid #D9D9D9; } }

2、使用组件

> //引入组件 import queryMaterial from '@/views/components/queryMaterial/queryMaterial' export default { //注册组件 components: { 'query-material': queryMaterial }, data() { return { tit1: '名称', form: { id: null, name: '', } } }, methods: { //接收到子组件传递过来的值 selectMaterial(data) { console.log(data, '选择的数据') }, } } ='scss' scoped> @import '@/styles/workOrder.scss';