Vue+jquery上拉加载
<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上拉加载的更多相关文章
- jQuery上拉加载更多
<header id="header">首 页</header> <section id="main"> <ul id ...
- vue mpvue 上拉加载更多示例代码
vue 上拉加载更多示例代码 可以比较简单的改为 mpvue , 去除滚动判断,直接放在 onReachBottom 周期即可. html <div id="app"> ...
- php+jquery 上拉加载
<script type="text/javascript"> var resflow = true,pages =2; var ps=$("#ids&quo ...
- vue.js移动端app实战4:上拉加载以及下拉刷新
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...
- jquery 和 mui 上拉加载
jquery: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <m ...
- Vue(小案例_vue+axios仿手机app)_上拉加载
---恢复内容开始--- 一.前言 ...
- vue-scroller实现vue单页面的上拉加载和下拉刷新问题
在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...
- vue+better-scroll 下拉刷新,上拉加载更多
better-scroll 来做下拉刷新和 上拉加载 特别方便. 安装好vue脚手架和better-scroll 之后 直接复制粘贴就可以看到效果了 <template> <div ...
- vue移动端上拉加载更多
LoadMore.vue <template> <div class="load-more-wrapper" @touchstart="touchSta ...
随机推荐
- 概率dp——cf518D
通过最后的概率求最终的期望 #include<bits/stdc++.h> using namespace std; ; double p,dp[maxn][maxn]; int n,t; ...
- Ubuntu 更新错误修复大全
合并列表问题 当你在终端中运行更新命令时,你可能会碰到这个错误“合并列表错误”,就像下面这样: E:Encountered a section with no Package: header, E:P ...
- linxu(centos)安装php-fpm
编译安装php-fpm 安装前准备 yum -y install gcc automake autoconf libtool make yum -y install gcc gcc-c++ glibc ...
- 杂项-日志:日志(log)
ylbtech-杂项-日志:日志(log) 1.返回顶部 1. 概述 网络设备.系统及服务程序等,在运作时都会产生一个叫log的事件记录:每一行日志都记载着日期.时间.使用者及动作等相关操作的描述. ...
- Big Number HDU - 1212
As we know, Big Number is always troublesome. But it's really important in our ACM. And today, your ...
- 2018-8-10-使用-ahk-让普通键盘变为Dvorak键盘
title author date CreateTime categories 使用 ahk 让普通键盘变为Dvorak键盘 lindexi 2018-08-10 19:16:51 +0800 201 ...
- readv 和 writev
Unix 系统已经长时间支持名为 readv 和 writev 的 2 个系统调用. 这些 read 和 write 的"矢量"版本使用一个结构数组, 每个包含一个缓存的指针和一个 ...
- [Noip 2013 Day1-3] 货车运输 做法总结
[Noip 2013 Day1-3] 货车运输 做法总结 Online Judge:Luogu-1967 Label:启发式合并,离线,整体二分,按秩合并,倍增,最大生成树 打模拟离线赛时做到,顺便总 ...
- 使用node.js实现反向代理
一. 反向代理的应用场景 1. 静态资源与动态资源分离 e.g. 图片服务器 2. AJAX跨域访问 3. 搭建统一服务网关接口 二. 使用node.js实现反向代理 1. 安装http-proxy模 ...
- 我眼中javascript的这些年
写了两年多的js了吧,一开始的目标并没有很学术,我只想安安静静做个很厉害的开发者.但是总是沉溺在一种语言里,会让人误以为这种语言很厉害,就像只在村子里混的话,我觉得我自己可以逆天,村外有人,编程世界也 ...