Vue.js实现下拉无限刷新分页
2017-05-26 18:04
603 查看
<!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');
})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [DIV/CSS] Vue.js 开发实践：实现精巧的无限加载与分页功能
- vue使用mint-ui实现下拉刷新和无限滚动的示例代码
- Vue.js实现无限加载与分页功能开发
- JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现第1/2页
- Hook.js – 在传统网页上实现手机中的下拉刷新效果
- SUI的无限下拉和分页效果的实现
- 《React-Native系列》23、 js实现下拉刷新效果（Android和iOS通用）
- 采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果
- JS实现无限分页加载——原理图解
- Vue.js学习 Item16 – 实现一个自定义分页组件vue-paginaiton
- js 实现无限加载分页（适合移动端）
- 使用 Vue.js 结合bootstrap 实现的分页控件
- .NET中使用js实现百度搜索下拉提示效果[不是局部刷新，呜呜。。]
- js无限加载分页原理实现
- 《React-Native系列》23、 js实现下拉刷新效果（Android和iOS通用）
- net + js 实现无刷新联动下拉框
- .NET中使用js实现百度搜索下拉提示效果[不是局部刷新，呜呜。。]
- 采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果
- Android 自定义ListView实现底部分页刷新与顶部下拉刷新 .
- Vue.js实现一个自定义分页组件vue-paginaiton