<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. 1002CSP-S模拟测试赛后总结

    晚上 我死了.T1全场AC只有我爆零了?? 还非常中二地写了个代码注释: 水题不假,但你不知道题水你更水么?? 碰到简单题就掉以轻心??还告诉自己不要掉以轻心…… 这下是真的滑天下之大稽了吧. 读题不 ...

  2. [JZOJ 5778] 没有硝烟的战争

    思路: 记\(dp[i][j] = 0/1\)来表示第\(i\)个动物报的数字是\(j\),有无必胜策略. 判断有没有转移就可以了. 输出直接对于每一只动物,看\(dp[i][1->k]\)有没 ...

  3. 机器学习 101 Mahout 简介 建立一个推荐引擎 使用 Mahout 实现集群 使用 Mahout 实现内容分类 结束语 下载资源

      机器学习 101 Mahout 简介 建立一个推荐引擎 使用 Mahout 实现集群 使用 Mahout 实现内容分类 结束语 下载资源 相关主题   在信息时代,公司和个人的成功越来越依赖于迅速 ...

  4. Vue-组件详解

    转载:https://segmentfault.com/a/1190000015199363 查看原文站点,更多扩展内容及更佳阅读体验! 组件详解 组件与复用 Vue组件需要注册后才可以使用.注册有全 ...

  5. sql 查询问题

    在做数据导出时候,当某个表某字段含有单引号时候老是报错,所以要排除这种情况: sql查询某表某字段值带单引号情况 select 主键码 from 馆藏书目库 where 题名 like '%''%' ...

  6. Spring - 整合MyBatis

    目的: 使用 Spring 容器用单例模式管理 MyBatis 的 sqlSessionFactory : 使用 Spring 管理连接池.数据源等: 将 Dao / Mapper 动态代理对象注入到 ...

  7. Linux时间和时区设定

    一.时区设定 由于安装系统时采用了UTC,那么什么是UTC呢,简单的说UTC就是0时区的时间,是国际标准,而中国处于UTC+8时区. 使用tzselect命令,过程如下: 可以看到此环境变量已设置,将 ...

  8. LoadRunner脚本编写(6)— 数据类型转换和字符串操作

    LoadRunner脚本编写(6)— 数据类型转换和字符串操作 一,数据类型转换 没有使用过C编程的LoadRunner脚本编写者会发现在数据类型转化方面比较困难.下面介绍这方面的知识. 1. 相似函 ...

  9. 虚拟机上CentOS7 配置NAT模式

    1. 虚拟机网络适配器选择NAT模式 2. 使用vi编辑/etc/sysconfig/network-scripts/ifcfg-ens32 vi /etc/sysconfig/network-scr ...

  10. 三剑客之一------>awk

    awk :  一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...