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
最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...
随机推荐
- Socket层实现系列 — I/O事件及其处理函数
主要内容:Socket I/O事件的定义.I/O处理函数的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd I/O事件定义 sock中定义了几个I/ ...
- STL：STL各种容器的使用时机详解
C++标准程序库提供了各具特长的不同容器.现在的问题是:该如何选择最佳的容器类别?下表给出了概述. 但是其中有些描述可能不一定实际.例如:如果你需呀处理的元素数量很少,可以虎落复杂度,因为线性算法通常 ...
- Android 纵向跑马灯滚动效果
像淘宝和京东都会有跑马灯的效果,今天给大家贡献下以前项目的一个demo,各位看官,且看效果图. 我们先定义一个Bean文件,这个实体类文件主要包含标题,内容描述,以及还有跳转的链接. LampBean ...
- Android StringEntity() 和 UrlEncodedFormEntity() 的区别
今天在做安卓客户端向服务器提交数据的过程中,在组织POST数据时,用了UrlEncodedFormEntity()这个方法,但是后台报错,说是无法解析json内容. 按照本来的想法,向后台发送的是 j ...
- 【翻译】Ext JS 5的委托事件和手势
原文:Delegated Events and Gestures in Ext JS 5 简介 Ext JS在5之前的版本,被设计为专用于传统鼠标输入的桌面设备使用.而从5开始,添加了对触屏输入的支持 ...
- 框架页面高度自动刷新Javascript脚本
实现原理:加载index.htm时候,每隔1秒钟自动调用脚本刷新框架页面代码 代码优点:只需要设置index.html框架页面中的脚本,调用加载的子页面中不需要设置任何代码. index.htm代码如 ...
- Gradle 1.12用户指南翻译——第三十五章. Sonar 插件
本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
- Slop One 算法
Slope One 算法是由 Daniel Lemire 教授在 2005 年提出的一个 Item-Based 推荐算法. Slope One 算法试图同时满足这样的的 5 个目标: 易于实现和维护: ...
- 【55】java异常机制剖析
一.为什么要使用异常 首先我们可以明确一点就是异常的处理机制可以确保我们程序的健壮性,提高系统可用率.虽然我们不是特别喜欢看到它,但是我们不能不承认它的地位,作用.有异常就说明程序存在问题,有助于我们 ...
- 循环赛日程编排c代码
#include <stdio.h> int m,s,n; int i,j; int a[100][100]; int sf(int n) { if(n%2!=0) printf(&quo ...