Vue.js实现下拉无限刷新分页
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport"
content="width=device-width, initial-scale=1,user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
<title>积分明细</title>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL ?>/points/require.js"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL ?>/points/config.js"></script>
<script type="text/javascript">require(['amazeui']);</script>
</head>
<body> <div id="vue-app"></div>
<script type="text/x-template" id="well">
<div class="top am-g">
<div class="order-img am-u-sm-6"></div>
<div class="info am-u-sm-6">
<p>积分 <span class="order-num">+{{member_info.member_points}}</span> </p>
<button @click="sendScore" type="button" class="checked">赠送积分</button>
</div>
</div>
</script>
<script type="text/x-template" id="points">
<ul class="am-list">
<li class="border0">
<div class="content">
<p>收支明细</p>
</div>
</li>
<li v-for="item in list" :key="item.pl_id">
<div class="content am-g">
<div class="time am-u-sm-2">
<p>{{item.date}}</p>
<p class="am-text-xs">{{item.time}}</p>
</div>
<div class="details am-u-sm-7">
<p class="am-text-truncate">{{item.pl_desc}}</p>
<p class="am-text-xs">{{item.day}}</p>
</div>
<div :class="{num:true, 'am-u-sm-3': true, reduce: item.pl_points < 0, plus: item.pl_points > 0}">{{item.pl_points}}</div>
</div>
</li>
</ul>
</script>
</body>
</html>
然后是js
require(['vue', 'jquery', 'http://res.wx.qq.com/open/js/jweixin-1.2.0.js', 'css!/data/resource/points/style/score-details.css'], function(Vue, $, wx) {
Vue.component('points', {
template: '#points',
props: ['list']
});
Vue.component('well', {
template: '#well',
props: ['member_info', 'isCreated'],
methods: {
sendScore () {
if(this.isCreated) {
alert('分享数据已创建，点击右上角菜单，分享给朋友领取');
} else {
$('#my-prompt').modal();
}
}
}
});
new Vue({
// el: '#vue-app',
data: {
member_info: {"member_id":"27","member_name":"ymjrgwd","member_truename":"","member_avatar":"\/data\/upload\/shop\/avatar\/avatar_27.jpg","member_sex":"0","member_birthday":null,"member_passwd":"e10adc3949ba59abbe56e057f20f883e","member_paypwd":"e10adc3949ba59abbe56e057f20f883e","member_email":"785578897@qq.com","member_email_bind":"1","member_mobile":"","member_mobile_bind":"0","member_qq":"","member_ww":"","member_login_num":"72","member_time":"1438330582","member_login_time":"1494206840","member_old_login_time":"1493691486","member_login_ip":"","member_old_login_ip":"","member_qqopenid":null,"member_qqinfo":"10","member_sinaopenid":null,"member_sinainfo":null,"member_points":"245","available_predeposit":"49914.00","freeze_predeposit":"0.00","available_rc_balance":"0.00","freeze_rc_balance":"0.00","inform_allow":"1","is_buy":"1","is_allowtalk":"1","member_state":"1","member_snsvisitnum":"21","member_areaid":null,"member_cityid":"0","member_provinceid":"0","member_areainfo":"","member_privacy":null,"member_quicklink":null,"member_exppoints":"255","inviter_id":"0","openid":null,"invite_at":"0","inviter_name":"","alipay_account":null,"alipay_account_name":"","alipay_account_phone":"","pdc_bank_name":null,"pdc_bank_no":null,"pdc_bank_user":null,"pdc_bank_phone":null,"member_id_no":null,"member_age":"0","freeze_points":"0"},
points_list: [],
page: 0,
size: 10,
finished: false,
score: '',
store_info: {"store_id":"7","appid":"wxae950948a16763b4","appsecret":"d0fddcfef6830cd41b0f53e3958436fa","encodingaeskey":"ymjr","token":"weixin","siteurl":"http:\/\/wx.yimayholiday","mchid":"1436606002","mchid_key":"bMkqpDWqFSxTUJypesGYBtUqqTSIvdKY","js_api_call_url":"http:\/\/wx.yimayholiday.com\/wap_shop\/api\/payment\/wxpay\/js_api_call.php","notify_url":"http:\/\/wx.yimayholiday.com\/wap_shop\/api\/payment\/wxpay\/notify_url.php","sslcert_path":"cert\/7\/apiclient_cert.pem","sslkey_path":"cert\/7\/apiclient_key.pem","qr":null},
jsapi_config: [],
isCreated: false,
},
methods: {
bindScroll() {
if(document.body.scrollTop + window.innerHeight >= document.body.clientHeight-10){
setTimeout(this.loadPointsList(),5000);
}
// if($(document).scrollTop() + $(window).height() > $(document).height() - 10) {
// this.loadPointsList();
// }
},
loadPointsList() {
if(this.finished){
return true;
}
$.get('index.php?act=member&op=score&do=load', {page: this.page, size: this.size}, function(response) {
if(response.code == 1){
this.page ++;
this.points_list = this.points_list.concat(response.data);
if(response.data.length < this.size){
this.finished = true;
}
}
}.bind(this), 'json');
},
sendScore: function(){
var score = parseInt(this.score) || 0;
if(score <= 0){
this.score = '';
alert('请输入您要赠送给TA的积分数');
return false;
}
if(score > this.member_info.member_points){
alert('积分不足');
this.score = '';
return false;
}
//do something
var that = this;
// that.jsapi_config.debug = true;
wx.config(that.jsapi_config);
if($.isEmptyObject(that.jsapi_config.appId)){
alert('请在微信中打开分享');
return;
}
$.post('index.php?act=member&op=shareScore', {score: score}, function(response){
if(response.code == 1){
that.member_info.member_points -= score;
that.isCreated = true;
wx.ready(function(){
var url = new URLSearchParams();
url.append('act', 'member');
url.append('op', 'getScore');
url.append('points_id', response.data.id);
url.append('store_id', that.store_info.store_id);
url.append('store_member_info', that.store_info.store_id);
var query = url.toString();
var sharedata = {
title : that.store_info.store_name,
desc :'你的朋友' + that.member_info.member_name + '给你赠送了' + score + '积分，快来领取吧',
imgUrl : that.member_info.member_avatar,
link :'/points/index.php?' + query,
success: function(){
},
cancel: function(){
$.post('index.php?act=member&op=cancelScore', {id: response.data.id}, function(req){
alert(req.msg);
that.member_info.member_points += score;
}, 'json');
}
};
wx.onMenuShareAppMessage(sharedata);
wx.onMenuShareTimeline(sharedata);
alert('点击右上角菜单，分享给朋友领取');
});
} else {
alert(response.msg);
}
}, 'json');
}
},
mounted () {
setTimeout(this.loadPointsList(),5000);
window.addEventListener('scroll', this.bindScroll);
},
template: `<div class="container"><div class="score-details">
<well :member_info="member_info" :isCreated="isCreated"></well>
<div class="bottom">
<points :list="points_list"></points>
</div>
<button type="button" @click="this.loadPointsList" v-show="finished">扯到底了</button>
<div class="loading" v-show="!finished" ><span></span><span></span><span></span><span></span><span></span></div>
</div>
<!-- 模态框 -->
<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt" style="display: none;">
<div class="am-modal-dialog">
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>×</a>
<div class="am-modal-bd">
请输入您要赠送给TA的积分数
<input type="text" class="am-modal-prompt-input" v-model="score">
</div>
<div class="am-modal-footer">
<button class="checked am-modal-btn" style="border-right: 1px solid #f74828" @click="sendScore">确定</button>
</div>
</div>
</div></div>`
}).$mount('#vue-app');
})
Vue.js实现下拉无限刷新分页的更多相关文章
- Vue.js 带下拉选项的输入框（Textbox with Dropdown）组件
带下拉选项的输入框 (Textbox with Dropdown) 是既允许用户从下拉列表中选择输入又允许用户自由键入输入值.这算是比较常见的一种 UI 元素,可以为用户提供候选项节省操作时间,也可以 ...
- vue js select下拉框
<template> <ul id="select"> <li> <div class="select-head"&g ...
- vue mint-ui 框架下拉刷新上拉加载组件的使用
安装 npm i mint-ui -S 然后在main.js中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.us ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- vue移动端下拉刷新、上拉加载
由于自身的项目比较简单,只有几个H5页面,用来嵌入app中,所有没有引入移动端的UI框架,但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载,有更好的用户体验,自己写组件实现. 1.下拉刷新Drop ...
- easyui combogrid下拉表格的分页/按键/动态搜索
作者:xfl4629712 < easyui combogrid下拉表格的分页/按键/动态搜索 > 需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下 ...
- Windows Phone 8 LongListSelector实现下拉自动刷新列表
LongListSelector是一个加强版的列表控件,它可以实现分组的列表,如系统人脉列表的交互效果就可以利用LongListSelector控件去实现,同时LongListSelector也一样可 ...
- Js获取下拉框选定项的值和文本
Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...
- JS模拟下拉框select
最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...
随机推荐
- SQL备份所有数据库脚本
技巧要点:使用游标循环读取所有数据库名,然后定义存放路径,最后备份所有数据库到指定存在的本地文件夹中 脚本如下: declare @fileName varchar(255) --定义备份文件名变量d ...
- Tomcat如何实现资源安全管理
在了解了认证模式及Realm域后,我们看看Tomcat是如何设计实现资源安全管理的.在认证模式上,必须要支持多种认证模式,包括Basic模式.Digest模式.Form模式.Spnego模式.SSL模 ...
- (NO.00001)iOS游戏SpeedBoy Lite成形记(八)
前一篇提到,如果要想动态修改选手的速度需要在update方法中添加代码. 因为update方法在游戏每一帧都会调用,所以我们不可能修改的太频繁.否则一来对性能有影响,而来玩家表现的极不自然,像抽风一样 ...
- AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)
AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...
- Python学习笔记 - 函数参数
>>> def power(x): ... return x * x ... >>> power(5) 25 >>> def power(x, n ...
- MySQL正则表达式初步
如果想要了解完整的MySQL手册, 请访问: MySQL 5.1参考手册 你还可以学习: MySQL学习精粹 我们知道,在SQL之中,可以用 like 这个谓词(表达式) 来进行模糊检索,并支持 %, ...
- 《java入门第一季》之面向对象面试题
1:方法重写和方法重载的区别?方法重载能改变返回值类型吗? 方法重写: 在子类中,出现和父类中一模一样的方法声明的现象. 方法重载: 同一个类中,出现的方法名相同,参数列表不同的现象. 方法重载能改变 ...
- Web应用程序设计十个建议
原文链接: Top 10 Design Tips for Web Apps 原文日期: 2014年04月02日 翻译日期: 2014年04月11日 翻译人员: 铁锚 现代web应用通常在互联网上通过 ...
- Linux - quota的举例说明
实作 Quota 流程-1:文件系统支持 [root@www ~]# df -h /home Filesystem Size Used Avail Use% Mounted on /dev/hda3 ...
- hbase mlockall
mlockall 头文件:#include <sys/mman.h> 函数原型:int mlockall(int flags); flags: MCL_CURRENT --Lo ...