虚位以待(AD)
虚位以待(AD)
首页 > 网页特效 > JavaScript > vue制作加载更多功能的正确打开方式

vue制作加载更多功能的正确打开方式
类别:JavaScript   作者:码皇   来源:互联网   点击:

这篇文章是一篇Vue js的教程,目标在于用一种常见的业务场景——分页 无限加载,以及编写过程中自己的错误写法,分享给大家,帮助读者更好的理解Vue js中的一些设计思想。

使用vue制作加载更多功能,通过ajax获取的数据往data里面push经常不成功,原因是push是往数组中追加数据内容的,而不能用作数组之间的拼接,ajax获取的数据就是数组形式的,因此不成功,应该使用concat()拼接两个数组。

    //这是错误的写法$.ajax({
    type:'get', async:false, url:path+'no/noticeMobile/getSendNoticeList?imToken='+ getToken +'&pageFlag=2', dataType: "json", success: function(msg){
    _self.$set('loadMore', msg);
    _self.conList.push(_self.loadMore);
    }
    }
    );
    //这是正确的写法$.ajax({
    type:'get', async:false, url:path+'no/noticeMobile/getSendNoticeList?imToken='+ getToken +'&pageFlag=2', dataType: "json", success: function(msg){
    _self.$set('main',_self.main.concat(msg)) }
    }
    );

模拟ajax数据加载测试地址:https://jsfiddle.net/zhoou/96mnckgL/

总结:还是自己js基础知识不扎实,push和concat两个函数用法没有搞清楚,如果你有更好的方法欢迎讨论。

相关热词搜索: vue js 图片懒加载 vue js 动态加载页面 v