关于MandMobile ScrollView组件的使用

前提：需要在移动端使用滚动加载的视图，所以找到了MandMobile的ScrollView组件进行使用。下列是一些心得以及实践代码。

组件文档地址：didi.github.io/mand-mobile…

普通使用

• 初始化时候手动进行组件的初始化，避免异步数据请求，内部宽高出现异常。
• 滚动到底部时，进行数据查询，查询的内容与分页查询一致，页数+1，并且返回的数据push到list中。
• 注意对触底函数的防抖限制（设置一个标识），并且需要判断查询是否结束，结束finishLoadMore。

<md-scroll-view
    :scrolling-x="false"          // 禁止横向滚动
    @end-reached="onEndReached"   // 滚动到底部的时候进行查询逻辑
    :end-reached-threshold="0.01" // 提前量 0.01px
    :manual-init="true"           // 手动初始化
    :auto-reflow="true"           // 自动重置滚动区域
    @scroll="handleScroll"        // 滚动的时候记录与组件顶部的距离
    ref="scrollView"
    >
</md-scroll-view>
<md-scroll-view-more slot="more" :is-finished="isFinished" ></md-scroll-view-more>
<script>
...
data(){
    list:[]
    dataLoadFlag: false,
    isFinished: false
},
methods:{
    onEndReached() {
        if (this.isFinished) {
                return;
        }
        this.onSearch();
    },
    onSearch(){
        this.dataLoading = true;
        var callback = (res)=>{
            this.list.push(res.body.content);
            this.isFinished = res.body.last;
            this.dataLoading = false;
            this.$refs.scrollView.finishLoadMore();
        }
    },
}
...
</script>

刷新数据，恢复上次查询位置

如果有点击进入子画面进行数据操作，并且数值会发生变化且需要显示在外部列表中，希望刷新数据的情况，并且需要记忆点击进入的位置，重新滚动到该位置。这里有个bug，如果条数会发生变化，或者是数据顺序会发生变化，每次查询位置都不确定的情况，更倾向于只刷新当前点击块区域，每次进入子画面时要单独进行一次查询，确保短期内数据的正常。

handleScroll({scrollLeft,scrollTop}){
    this.scrollTop = scrollTop;
},
onSearch(){
    param.currentPage = 1;
    param.pageSize = this.mult(this.pageSize*this.currentPage); // 本次刷新变为获取所有当前数据，这个也有隐患，如果滑动的数量过大也会有性能上的问题，需要进行虚拟滚动或者逻辑上的优化
    var callback = (res)=>{
        ...
        // this.list.push(res.body.content);
        this.list = res.body.content
        ...
    }
}