<ul>
<li class="new-list" v-for="item in proarr">
<a :href="'/index.php/new/news?id='+item.id" class="new-item">
<div class="new-title ell">{{item.title}}</div>
<div class="new-content">
<div class="new-cover" v-bind:style="{backgroundImage: 'url('+item.purl+')'}"></div>
<div class="new-desc">{{item.introduction}}</div>
</div>
<div class="new-date">{{item.create_date}}</div>
</a>
</li>
</ul>
<div id="ajaxloading" v-show="showLoading" class="ac line-scale-pulse-out-rapid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p class="errormsg ac orange pd20">{{errmsg}}</p>
new Vue({
el: '#app',
data() {
return {
proarr: [],
showLoading: false,
p:1,
errmsg:''
};
},
components: {
},
created() {
this.getProList();
    //监听滚动
window.addEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
    //判断滚动到底部
if ($(window).scrollTop() >=$(document).height() - $(window).height()) {
this.showLoading = true;
this.p++;
this.getProList(this.p);
}
},
getProList() {
var that = this;
$.post('url',{p:this.p},function(datas){
var state = datas.sign;
that.showLoading = false;
if (state === ERROK) {
var data = datas.data.data;
for (var i = 0; i < data.length; i++) {
that.proarr.push(data[i]);
}
that.errmsg='';
} else {
that.errmsg='暂无更多数据';
}
},'json');
}
}
})

开始碰到个坑。请求到的数据我直接push到循环数组中,结果整个数组变成一个元素,后来想了想用循环把每一条数据分别push才解决这个问题

Vue+jquery上拉加载的更多相关文章

  1. jQuery上拉加载更多

    <header id="header">首 页</header> <section id="main"> <ul id ...

  2. vue mpvue 上拉加载更多示例代码

    vue 上拉加载更多示例代码 可以比较简单的改为 mpvue , 去除滚动判断,直接放在 onReachBottom 周期即可. html <div id="app"> ...

  3. php+jquery 上拉加载

    <script type="text/javascript"> var resflow = true,pages =2; var ps=$("#ids&quo ...

  4. vue.js移动端app实战4:上拉加载以及下拉刷新

    上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...

  5. jquery 和 mui 上拉加载

    jquery: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <m ...

  6. Vue(小案例_vue+axios仿手机app)_上拉加载

    ---恢复内容开始--- 一.前言                                                                                    ...

  7. vue-scroller实现vue单页面的上拉加载和下拉刷新问题

    在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...

  8. vue+better-scroll 下拉刷新,上拉加载更多

    better-scroll 来做下拉刷新和 上拉加载 特别方便.  安装好vue脚手架和better-scroll 之后 直接复制粘贴就可以看到效果了 <template> <div ...

  9. vue移动端上拉加载更多

    LoadMore.vue <template> <div class="load-more-wrapper" @touchstart="touchSta ...

随机推荐

  1. android gradle 和gradle plugin

    android gradle 和gradle plugin 1.安装完AS3.5.2创建完项目一运行,报了如下错误 Error:Could not find com.android.tools.bui ...

  2. C++——虚析构

    目的: //只执行了 父类的析构函数//向通过父类指针 把 所有的子类对象的析构函数 都执行一遍//向通过父类指针 释放所有的子类资源 方法:在父类的析构函数前+virtual关键字 #define ...

  3. 扩展gcd求逆元

    当模数为素数时可以用费马小定理求逆元. 模数为合数时,费马小定理大部分情况下失效,此时,只有与模数互质的数才有逆元(满足费马小定理的合数叫伪素数,讨论这个问题就需要新开一个博客了). (对于一个数n, ...

  4. 第一个servlet小程序

    第一个servlet小程序 com.fry.servlet.HelloServlet package com.fry.servlet; import javax.servlet.ServletExce ...

  5. js实现前端动态筛选表格内容

    代码参考: http://www.sharejs.com/codes/javascript/4289 http://www.jb51.net/article/103420.htm https://ww ...

  6. VS2010-MFC(图形图像:GDI对象之画笔CPen)

    转自:http://www.jizhuomi.com/software/246.html 上一节讲了CDC类及其屏幕绘图函数,本节的主要内容是GDI对象之画笔CPen. GDI对象 在MFC中,CGd ...

  7. python列表的常用操作

    列表是python的基础数据类型之一 ,其他编程语言也有类似的数据类型.比如JS中的数 组, java中的数组等等. 它是以[ ]括起来, 每个元素用' , '隔开而且可以存放各种数据类型: 列表是p ...

  8. soj102 普通平衡树

    题意: 标程: #include<cstdio> using namespace std; int read() { ,f=;char ch=getchar(); ;ch=getchar( ...

  9. jvisualvm 工具使用【转】

    VisualVM 是Netbeans的profile子项目,已在JDK6.0 update 7 中自带(java启动时不需要特定参数,监控工具在bin/jvisualvm.exe). https:// ...

  10. 2016.8.19上午初中部NOIP普及组比赛总结

    2016.8.19上午初中部NOIP普及组比赛总结 链接:https://jzoj.net/junior/#contest/home/1338 这次总结发得有点晚啊!我在这里解释一下, 因为浏览器的问 ...