uniapp 下拉数组数据的加载

<scroll-view class="HeidthVh" style="height:90vh;" scroll-y="true" @scrolltolower="lowerBottom">
				<view class="khmc" v-for="(item,index) in TwoData" :key="index" @click="khmcBtn(item.id)">
					<view class="khmcLeft">
						<view>客户名称：{{index}}</view>
						<view>联系人：{{item.nameText}}</view>
						<view>电话：{{item.tel}}</view>
						<view>电话：{{item.tel}}</view>
						<view>电话：{{item.tel}}</view>
						<view>电话：{{item.tel}}</view>
						<view>电话：{{item.tel}}</view>
						<view>电话：{{item.tel}}</view>
						<view>电话：{{item.tel}}</view>
						<view>电话：{{item.tel}}</view>
						<view>电话：{{item.tel}}</view>
						<view>电话：{{item.tel}}</view>
						<view>电话：{{item.tel}}</view>
						<view>电话：{{item.tel}}</view>
					</view>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
				<u-button type="primary" text="确定"></u-button>
			</scroll-view>

@scrolltolower="lowerBottom"是uniapp中scroll-view下拉触底事件

methods: {
			//分页 data数组 pageIndex页面 num一次加载数量
			pagination(data, pageIndex, num) {
				let newDATA = data.slice(pageIndex * num, (pageIndex + 1) * num)
				return newDATA
			},
}

自定义方法中使用数组的slice截取后端传过来数组中指定展示在页面的数据。

data（数组数据）

pageIndex（当前页面）

num（截取数据条数）

sumber（截取的条数）

TwoData（空数组）

onLoad() {
			this.TwoData = this.pagination(this.khmcData, this.num, this.sumber)
		},

页面加载时，需要调用自定义方法，把需要展示的数据赋值给应该新的空数组

// 触底事件
			lowerBottom() {
				let jjj=this.pagination(this.khmcData,this.num++,this.sumber)
				this.TwoData.push(...jjj)
				}

方法中使用触底事件按照需求往空数组里面加数据。

...jjj解构好把数据添加到TwoData中，不解构的话是一个数组，数组添加数组添加渲染到页面为空