mui刷新组件+Vue.js上拉刷新时第一次在页面展示的数据正常,当上拉最后不足一页显示没有更多数据。测试正常,当返回首页,再次进入列表页面,上拉刷新发现页面一直重复展示第一次上拉刷新的结果。经过逐步排查,现将问题解决代码展示如下。
//前端架构采用Vue.js+FIS3下面是js代码
'use strict';
var common = require('util/common'),
Vue = require('vue');
require('static/libs/mui/pull/mui.pullToRefresh');
require('static/libs/mui/pull/mui.pullToRefresh.material');
var data = {
areaLabel:'001',
hotLabel:'001',
actLabel:'001',
channel:'03',
rows: 5, //页面展示一次展示5条
page: 1
};
var isLoadedAll = false;
module.exports = Vue.extend({
template: __inline('module.tpl'),
data: function() {
return{
items:[],
}
},
route: {
data: function (transition) {
console.log('route view activated!');
transition.next();
console.warn('Change view to: ' + transition.to.path);
}
},
methods: {
query: function(pullRefreshEl) { //上拉刷新请求数据
var vm = this;
mui(".mui-slider").slider({interval:1000});// 大图滚动
common.Ajax({
url: 'api/wx/shop/queryGoodsList',
data: data,
success: function(json) {
vm.items = vm.items.concat(json.data);
data.page++;
pullRefreshEl && pullRefreshEl.endPullUpToRefresh(json.count == 0 || json.count < data.rows);
for(var i=0;i
这是刷新请求代码,看一眼没有什么错误,浏览器也不报错,第一次请求正常,当返回第二次请求时发现重复请求的都是第一次上拉加载数据,可以一直上拉加载下去,在这里有一个不容易发现的Bug,
当每一次加载都应该在ready中初始化data数据,看下面代码在ready中加入了在代码刚开始定义的data里面的页数和每页显示的数
ready:function(){
var _this=this;
window.onresize = common.resizeHanlder;
Vue.nextTick(function() {
common.resizeHanlder();
});
data = {
areaLabel:'001',
hotLabel:'001',
actLabel:'001',
channel:'03',
rows: 5,
page: 1
}
mui.init();
mui('#m-loan-query-list').pullToRefresh({
up: {
auto: true,
callback: function() {
var self = this;
setTimeout(function() {
_this.query(self);
}, 500);
}
}
});
}
});