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
最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...
随机推荐
- 自建log4cxx.sln
log4cxx的下载包是0.10版本的,代码较旧,有些错误,应该从主干下载最新的代码． 0.10的下载包中有projects目录,内有VC6的工程文件; 还有site目录,内有vc构建的帮助文档vst ...
- 【翻译】Ext JS 5的委托事件和手势
原文:Delegated Events and Gestures in Ext JS 5 简介 Ext JS在5之前的版本,被设计为专用于传统鼠标输入的桌面设备使用.而从5开始,添加了对触屏输入的支持 ...
- Spring揭秘 读书笔记 三 bean的scope与FactoryBean
本书可作为王富强所著<<Spring揭秘>>一书的读书笔记 第四章 BeanFactory的xml之旅 bean的scope scope有时被翻译为"作用域&quo ...
- Gradient Descent 梯度下降法-R实现
梯度下降法: [转载时请注明来源]:http://www.cnblogs.com/runner-ljt/ Ljt 作为一个初学者,水平有限,欢迎交流指正. 应用:求线性回归方程的系数 目标:最小化损失 ...
- 线性表链式存储设计与实现 - API实现
基本概念 链式存储定义 为了表示每个数据元素与其直接后继元素之间的逻辑关系,每个元素除了存储本身的信息外,还需要存储指示其直接后继的信息. 表头结点 链表中的第一个结点,包含指向第一个数据元素的指针以 ...
- 系统性能监测（使用nmon、nmonanalyser）
系统性能监测使用工具: l系统性能监测使用的主要监测工具是:nmon(AIX6.1及以上版本系统自带). l系统性能监测使用的主要分析工具是:nmonanalyser. NMON工具简介: NMON工 ...
- Erlang cowboy routing 路由
Erlang cowboy routing 路由 本文译自: http://ninenines.eu/docs/en/cowboy/1.0/guide/routing/ Routing 默认情况下,C ...
- android最火的开源项目
原文地址:http://www.csdn.net/article/2013-05-21/2815370-Android-open-source-projects-finale 此前,CSDN移动频道推 ...
- 个人Source Insight使用设置笔记
1.打开SourceInsight, 在菜单栏中点击Options-->Document Options 在显示的对话框中,点击Screen Fonts...., 可改变这个项目的字体,我选的是 ...
- css选择器语法速查
通用选择器 *{} 类似于通配符,匹配文档中所有元素类型: 类型选择器 h1,h2,p{} 匹配以逗号隔开元素列表中的所有元素 类选择器 .glass{} or p.glass{} id选择器 #id ...