问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue 下拉加载如何把后台数据融入进去？？？

头像
抹不平静
    5146
    新手上路，请多包涵

    大佬们
    本人是小白 刚入职场
    与后台交互非常少
    不知道怎么处理后台的数据
    如果小弟晚上还没解决问题
    小弟可能就要离职了!!
    希望大佬能帮帮小弟！
    sos！

    有下拉的demo
    用的是mint-ui
    vue 下拉加载请求后台数据 我现在是模拟的json
    用的是vue-resource请求数据
    怎么才能把我自己模拟的json,融入进去 5条5条的加载

    谢谢大佬们解答下！

    vue

    <template>
  <div class="page-loadmore">
    <h1 class="page-title">Pull up</h1>
    <p class="page-loadmore-desc">在列表底部, 按住 - 上拉 - 释放可以获取更多数据</p>
    <p class="page-loadmore-desc">此例请使用手机查看</p>
    <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <mt-loadmore :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" ref="loadmore">
        <ul class="page-loadmore-list">
          <li v-for="item in list" class="page-loadmore-listitem">{{ item }}</li>
        </ul>
        <div slot="bottom" class="mint-loadmore-bottom">
          <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
          <span v-show="bottomStatus === 'loading'">
            <mt-spinner type="snake"></mt-spinner>
          </span>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>

<style></style>

<script type="text/babel">
  export default {
    data() {
      return {
        list: [],
        allLoaded: false,
        bottomStatus: '',
        wrapperHeight: 0,
        waitingListData: []
      }
    },
    methods: {
      handleBottomChange(status) {
        this.bottomStatus = status;
      },
      loadBottom() {
        setTimeout(() => {
          let lastValue = this.list[this.list.length - 1];
          if (lastValue < 40) {
            for (let i = 1; i <= 10; i++) {
              this.list.push(lastValue + i);
            }
          } else {
            this.allLoaded = true;
          }
          this.$refs.loadmore.onBottomLoaded();
        }, 1500);
      }
    },
    created() {
      for (let i = 1; i <= 20; i++) {
        this.list.push(i);
      }
    },
    mounted() {
      this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
    }
  };
</script>

    json

    {
    "Code": 0,
    "Message": null,
    "Data": [
        {
            "SysName": "xitong",
            "TaskName": "名称名称名称名称1",
            "Title": "标题标题标题1",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名称17:017:017:0称2",
            "Title": "标题标题2222222",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称4:14:14:13",
            "Title": "标题题2",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名名称133414",
            "Title": "标题标题1",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名:08:08名称名:08:08",
            "Title": "标题标题:08:08",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名称名称名称1",
            "Title": "标题标题标题1",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名称17:017:017:0称2",
            "Title": "标题标题2222222",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称4:14:14:13",
            "Title": "标题题2",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名名称133414",
            "Title": "标题标题1",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名:08:08名称名:08:08",
            "Title": "标题标题:08:08",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名称名称名称1",
            "Title": "标题标题标题1",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名称17:017:017:0称2",
            "Title": "标题标题2222222",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称4:14:14:13",
            "Title": "标题题2",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名名称133414",
            "Title": "标题标题1",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名:08:08名称名:08:08",
            "Title": "标题标题:08:08",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名称名称名称1",
            "Title": "标题标题标题1",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名称17:017:017:0称2",
            "Title": "标题标题2222222",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称4:14:14:13",
            "Title": "标题题2",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名名称133414",
            "Title": "标题标题1",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名:08:08名称名:08:08",
            "Title": "标题标题:08:08",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名称名称名称1",
            "Title": "标题标题标题1",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名称17:017:017:0称2",
            "Title": "标题标题2222222",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称4:14:14:13",
            "Title": "标题题2",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名名称133414",
            "Title": "标题标题1",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名:08:08名称名:08:08",
            "Title": "标题标题:08:08",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名称名称名称1",
            "Title": "标题标题标题1",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名称17:017:017:0称2",
            "Title": "标题标题2222222",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称4:14:14:13",
            "Title": "标题题2",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名称名名称133414",
            "Title": "标题标题1",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        },
        {
            "SysName": "xitong",
            "TaskName": "名:08:08名称名:08:08",
            "Title": "标题标题:08:08",
            "ArriveTime": "2017-10-24 14:16",
            "AcceptTime": "2017-10-24 17:08",
            "StepName": "人员",
            "DataUrl": "http://aaa.com/docapi/doc/comsubmit/detail",
            "CurrStatus": null
        }

    ]
}

    这是我放弃的demo 每次都是全部加载出来 下拉从新请求全部 想五条五条显示

    <template>
    <div class="finshed-wrapper" :style="{'-webkit-overflow-scrolling': scrollMode}">
        
        <v-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
            <div class="finshed-content"  v-for="(item, index) in finshedListData">
                <div class="finshed-content-header">{{item.TaskName}}</div>
                <p class="finshed-content-title">{{item.Title}}</p>
                <div class="finshed-content-footer">
                    <div class="footer-left">{{item.StepName}}</div>
                    <div class="footer-right">{{item.ArriveTime}}</div>
                </div>  
            </div>
        </v-loadmore>

    </div>
</template>

<script>
    import {Loadmore} from 'mint-ui';
    export default {
        components:{
            'v-loadmore':Loadmore,
        },
        data () {
            return {
                pageNo:1,
                pageSize:5,
                finshedListData:[],
                allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
                scrollMode:"auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
                totalpage:0,
                loading:false,
                bottomText: '',
            }
        },
        mounted(){
            this.loadPageList();  //初次访问查询列表
        },
        methods:{
            loadBottom:function() {
                // 上拉加载
                this.more();// 上拉触发的分页查询
                this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位
            },
            loadPageList:function (){
                // 查询数据
                this.$http.get('/static/index/waitingList.json').then(res =>{
                    console.log(res.body, res.body.Data, Math.ceil(res.body.Data.length));
                    this.finshedListData = res.body.Data;
                    this.totalpage = Math.ceil(res.body.Data.length/this.pageSize);
                    if(this.totalpage == 1){
                        this.allLoaded = true;
                    }
                    this.$nextTick(function () {
                        // 是否还有下一页，加个方法判断，没有下一页要禁止上拉
                        this.scrollMode = "touch";
                        this.isHaveMore();
                    });
                });
            },
            more:function (){
                // 分页查询
                if(this.totalpage == 1){
                    this.pageNo = 1;
                    this.allLoaded = true;
                }else{
                    this.pageNo = parseInt(this.pageNo) + 1;
                    this.allLoaded = false;
                }

                console.log(this.pageNo);
                this.$http.get('/static/index/waitingList.json').then(res=>{
                    this.finshedListData = this.finshedListData.concat(res.body.Data);
                    console.log(this.finshedListData);
                    this.isHaveMore();
                });
            },
            isHaveMore:function(){
                // 是否还有下一页，如果没有就禁止上拉刷新
                //this.allLoaded = false; //true是禁止上拉加载
                if(this.pageNo == this.totalpage){
                    this.allLoaded = true;
                }
            }
        }
    }
</script>


<style scoped>
    .finshed-wrapper {
        top: 4.9rem;  
        bottom:0;  
        position:fixed;  
        overflow-y: auto;  
        overflow-x: hidden;
    }  

    .finshed-content {
        overflow: hidden;
        background: #FFF;
        border: .02rem solid #EEEEEE;
        /*padding: 14px 16px 11px 16px;*/
        padding: .7rem .8rem .55rem .8rem;
        overflow: hidden;
    }
    
    .finshed-content-header {
        font-size: 14px;
        height: 1rem;
        line-height: 1rem;
        color: #999;
        overflow: hidden;
        font-family: PingFangSC-Regular;
    }
    
    .finshed-content-title {
        font-size: 16px;
        line-height: 1.2rem;
        margin-top: 0.2rem;
        color: #333;
        overflow: hidden;
        font-family: PingFangSC-Regular;
        word-break: break-all;
        word-wrap: break-word;
    }
    
    .finshed-content-footer {
        height: 1.05rem;
        margin-top: 0.35rem;
        font-size: 12px;
    }

    .footer-left {
        float: left;
        height: 0.75rem;
        line-height: 0.75rem;
        border-radius: .45rem;
        padding: .1rem .45rem;
        color: #F6A623;
        border: 1px solid #F6A623;
    }

    .footer-right {
        float: right;
        line-height: 1.05rem;
        font-family: SFUIText-Regular;
        font-size: 14px;
        color: #666666;
    }

</style>
    htmljavascriptvue.js
    阅读 3k
    2 个回答
    得票最新
    头像
    leonleung
      2.9k1922

      晕哦，你之前也发过这个问题，感觉我的解答没毛病呀。。。

      头像
      waitTu
        483

        你的数据后台的数据结构是一起请求过来的还说分批请求过来的。
        要是一起请求过来要进行数组的分割，不是一起过来要进行请求要后台给你参数一般都是 “当前业数”，“总业数”,"每页的条数"
        一般分批请求过来代码给你个参考
        data(){

        reutrn{
    page:0,
}

        }
        loadBottom() {

            setTimeout(() => {
      
      this.getData(this.page+1)
    }, 1500);
  }

        getData(page){
        this.$http.post(

        '你的url', 
{
   page: page,//当前业数
}
}).then(function (res) {
   this.list.push(得到的数据);
   this.page = 当前业数
   判断是否是最后一页 
   if(当前业数===总业数){
   this.allLoaded =false;
   }else{
   this.allLoaded = true;
   }
     
      
}, function () {
    // 失败回调
});

        }

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题