naro

您所在的位置:首页 > 解决方案 > 前端技术 > 正文
使用vux的scroller组件做上滑翻页遇到的坑 发表时间:2018-01-29 12:06:54 点击:
导言:项目中使用vux的sroller组件制作上滑翻页时,每次翻页都是在本页刷新下一页数据,而不是在本页追加下一页数据,在这个问题上绕了很久,最后发现是数据循环加载的问题,这里做一个说明mark。

项目环境:laravel、vue、vux、element

问题:项目开发过程中,使用vux的sroller组件时,上滑翻页每次都是在本页刷新下一页数据,而不是在本页追加下一页数据。(不过这个思路可以用作下拉更新本页所有接口数据中去也是极好的)

getListData(){
    return axios.get("http://api.tongwei.cn/ApiNews/getArticleByPage", {
    params: {
        page: this.currentP,
        pageSize: this.currentPS
    }
})
.then(response => {
    // this.listcon = response.data.data;(这个是普通接口赋值的写法,结果会在本页更新下一页内容,而不是本页追加下一页内容)
    var data = response.data.data;
    for (var i = 0; i < data.length; i++) {
        this.listcon.push(data[i]);
    }
    this.showloading = false;
    });
},

可见,如果要在本页追加下一页数据,不能用之前的赋值写法,需要给一个for循环,并push数组值到页面中去。