mui刷新组件+Vue.js上拉刷新时第二次进入页面返回数据一直重复Bug

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);
                }
            }
        });
    }
});

 

转载于:https://my.oschina.net/u/2881037/blog/865519

你可能感兴趣的:(javascript,json,前端)