实现上拉触底加载下一页数据
发布时间
阅读量：
阅读量
<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循环优化
全部评论 (0)
还没有任何评论哟~