A痞子  2023-01-30 11:25 采纳率: 73.8%
浏览 37
已结题

请教下uni-app上拉如何加载新的数据

请教下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>


  • 写回答

2条回答 默认 最新

  • 你好!机器人 2023-01-30 14:40
    关注
    
    this.a2 = [...this.a2, ...res.data]
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 2月7日
  • 已采纳回答 1月30日
  • 修改了问题 1月30日
  • 创建了问题 1月30日

悬赏问题

  • ¥15 电脑开机过商标后就直接这样,求解各位
  • ¥15 mysql , 用自己创建的本地主机和用户名 登录不上
  • ¥15 关于#web项目#的问题,请各位专家解答!
  • ¥15 vmtools环境不正常
  • ¥15 请问如何在Ubuntu系统中安装使用microsoft R open?
  • ¥15 jupyter notebook
  • ¥30 informer时间序列预测
  • ¥20 SSR引物多态性分析
  • ¥15 大漠插件在Win11易语言注册调用和免注册灵异事件,VS上注册调用完全没问题
  • ¥15 Addressable缓存机制做热更新的问题