实现上拉触底加载下一页数据

<template>
	<view class="wrap">
		<!-- 数据盒子 -->
		
		<view class="dataBox">
			
			<!--数组数据 -->
			<view class="data" v-for="(item,index) in list" :key="index">
				<view class="left">
					<view class="" style="color: #555356;font-size: 28rpx;">第{{index + 1}}条数据</view>
					<view class="" style="color: #E5E3E5;font-size: 28rpx;" >{{item.time}}</view>
				</view>
				<view class="right">
					<view class="" style="color: #555356;font-size: 28rpx;">-{{item.price}}</view>
					<view class="" style="color: #E5E3E5;font-size: 28rpx;">{{item.word}}</view>
				</view>
			</view>
			
			
		</view>
		<!-- 组件在加载数据的时候显示，加载完毕后就隐藏 -->
		<tui-loadmore text="加载中..." :index="3" type="orange" v-show="showLoad">
		</tui-loadmore>
	</view>
</template>

<script>
	import tuiLoadmore from "@/components/thorui/tui-loadmore/tui-loadmore"
	export default {
		components:{
				tuiLoadmore
			},
		data() {
			return {
				arr:[
					{index: "001" , text:"第1条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "002" , text:"第2条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "003" , text:"第3条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "004" , text:"第4条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "005" , text:"第5条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "006" , text:"第6条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "007" , text:"第7条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "008" , text:"第8条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "009" , text:"第9条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "010" , text:"第10条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "011" , text:"第11条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "012" , text:"第12条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "013" , text:"第13条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "014" , text:"第14条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "015" , text:"第15条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "016" , text:"第15条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "017" , text:"第15条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "018" , text:"第15条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "019" , text:"第15条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "020" , text:"第15条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "021" , text:"第15条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "022" , text:"第15条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "023" , text:"第15条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "024" , text:"第15条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "025" , text:"第15条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "026" , text:"第15条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					{index: "027" , text:"第15条数据",time:"2021-12-21:30:58",price:"150",word:"交易关闭"},
					
				],
				//用一个空数组来显示获取的数据
				list: [],
				showLoad: false,
				page: 1, //默认第一页
				pageSize: 12,   //一页12条数据
				pageNumber:0, //数据总条数    通过原数据源的长度来计算  即arr.length
				//finished: false,   //加载完成状态
				totalPage:0, //总页数
				// newArr: ['one', 'two', 'three'],
				// newOarr: ['three', 'four']
			}
		},
		computed: {
			
		},
		//初始化的时候  相当于created，加载完毕后显示调用
		onLoad(){
			//求出总页数  向上取整
			this.totalPage= Math.ceil(this.arr.length/this.pageSize )
			console.log(this.totalPage);
			this.getData()
		},
		mounted() {
			
		},
		methods: {
			//重点
			getData() { // 获取数据  封装
				this.showLoad = true;
				setTimeout(()=> {
					//数组截取 索引左包含 右边不包含
					let start = (this.page - 1) * this.pageSize;
					let end = this.page * this.pageSize; 
					//(0,12)左包含，从索引为0的开始，到第11索引截止，包含11,不包含12
					//数组截取 
					let arr = this.arr.slice(start, end);
					//用显示的那个数组与截取的数组合并，然后显示
					this.list = this.list.concat(arr);
					//加载的图标隐藏
					this.showLoad = false;
				}, 1500)
				
			},
			//滚动到底部时触发
			onReachBottom() {
				//如果当前页数小于总页数，则可以调用封装的方法，否则数据结束加载，没有数据可以加载了
					if(this.page<this.totalPage){
						this.getData();
						this.page++;
						// console.log(this.page);
					}
			}
		}
	}
</script>

<style>
	.wrap {
		background-color: #dee1E6;
		padding:0 20rpx;
	}
	.dataBox {
		/* width: 100%; */
		/* height: 720rpx; */
		background-color: skyblue;
		padding: 0 20rpx;
	}
	.data {
		/* width: 400rpx; */
		height: 100rpx;
		border: 1px solid red;
		padding: 0 14rpx;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>

注意：数组源arr可以使用for循环优化