请教下uni-app上拉如何加载新的数据？
<template> <view>
<view v-for="(item,index) in a2" class="box1" :for="index">
<view :style="item.l11_30==true?'background-color:#FFB9DC':'background-color:#CCCCCC'">
<view class="box2"><text Selection space="ensp">借用时间：{{item.l11_4}} </text></view>
<view class="box3"><text Selection space="ensp">记单人：{{item.l11_14}}</text></view>
<view class="box2"><text Selection space="ensp">借用人：{{item.l11_10}} </text></view>
<view class="box3"><text Selection space="ensp">借用教室：{{item.l11_11}}</text></view>
<view class="box2"><text Selection space="ensp">借用周：{{item.l11_17}} </text></view>
<view class="box3"><text Selection space="ensp">借用星期：{{item.l11_15}}</text></view>
<view class="box2"><text Selection space="ensp">借用课次：{{item.l11_18}} </text></view>
<view class="box3"><text Selection space="ensp">借用时间段：{{item.l11_12}}</text></view>
<view class="box2"><text Selection space="ensp">备注：{{item.l11_8}} </text></view>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return{
a2:[],
a3:[],
}
},
methods:{ // methods包裹函数
getData(){
//开始请求服务器数据开始
uni.request({
url:'http://localhost/app/1.asp',
data: {
id1:'2',
id2:'addoil',
},
method: 'post',
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success: (res) => {
console.log(res.data)
this.a2 = res.data;
this.a2=[...this.a2,...this.a2]
}
})
//开始请求服务器数据结束
},
// 触底的事件
onReachBottom() {
console.log('到底了')
this.getData() //调用加载数据方法
// 让页码值自增 +1
//this.queryObj.pagenum += 1
},
onShow: function() {
this.getData() //调用加载数据方法
},
}
}
</script>
我把代码改成下面这样，就可以新旧数据衔接起来了。但是怎么新数据显示在上面。而旧数据显示在下面？
<template> <view>
<view v-for="(item,index) in a2" class="box1" :key="index">
<view :style="item.l11_30==true?'background-color:#FFB9DC':'background-color:#CCCCCC'">
<view class="box2"><text Selection space="ensp">借用时间：{{item.l11_4}} </text></view>
<view class="box3"><text Selection space="ensp">记单人：{{item.l11_14}}</text></view>
<view class="box2"><text Selection space="ensp">借用人：{{item.l11_10}} </text></view>
<view class="box3"><text Selection space="ensp">借用教室：{{item.l11_11}}</text></view>
<view class="box2"><text Selection space="ensp">借用周：{{item.l11_17}} </text></view>
<view class="box3"><text Selection space="ensp">借用星期：{{item.l11_15}}</text></view>
<view class="box2"><text Selection space="ensp">借用课次：{{item.l11_18}} </text></view>
<view class="box3"><text Selection space="ensp">借用时间段：{{item.l11_12}}</text></view>
<view class="box2"><text Selection space="ensp">备注：{{item.l11_8}} </text></view>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return{
a2:[],
a3:[],
page:1,
}
},
methods:{ // methods包裹函数
getData(){
//开始请求服务器数据开始
uni.request({
url:'http://localhost/app/1.asp',
data: {
id1:'2',
id2:'addoil',
page:this.page,
},
method: 'post',
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success: (res) => {
this.a2={...res.data,...this.a2},
console.log(this.a2)
}
})
//开始请求服务器数据结束
},
// 触底的事件
onReachBottom() {
console.log('到底了')
this.page ++ // 让页码值自增 +1
this.getData() //调用加载数据方法
//this.queryObj.pagenum += 1
},
// 监听页面加载
onShow: function() {
this.getData() //调用加载数据方法
},
//下拉刷新
onPullDownRefresh() {
console.log('下拉了'),
this.a2=[],
this.page=1,
this.getData() //调用加载数据方法
}
}
}
</script>
<style>
.box1{
margin-top: 15rpx;
font-size: 25rpx;
border:1px solid rgb(150,150,150);
border-radius:2px;
width: 735rpx;
margin-left: 5rpx;
display: centn;
}
.box2{
text-align: left;
}
.box3{
text-align:left;
}
</style>
