比loadmore更好用的scroller

npm i vue-scroller -s
import VueScroller from 'vue-scroller';
Vue.use(VueScroller);

用法：

<template>
    <div class="app1">
        <div v-bind:class="[loading ? 'main mainIn' : 'main']">
            <div class="reload">
                <scroller ref="scroller"
                          :on-refresh="refresh"
                          :on-infinite="infinite"
                          :noDataText="loadCompleted"
                          :refreshText="pull">
                    <div v-for="item in dataList">
                        <v-video v-if="item.modelCode === 'video'" :data="item"></v-video>
                        <one-photo v-if="item.modelCode === 'imageAndText'" :data="item"></one-photo>
                        <more-photo v-if="item.modelCode === 'moreImageText'" :data="item"></more-photo>
                        <v-text v-if="item.modelCode === 'text'" :data="item"></v-text>
                        <Photos v-if="item.modelCode === 'moreImage'" :data="item"></Photos>
                        <Special v-if="navigationType === 'special'" :data="item"></Special>
                    </div>
                </scroller>
            </div>
        </div>
    </div>
</template>
<script>
    import onePhoto from '../common/OnePhoto';
    import morePhoto from '../common/MorePhoto';
    import vText from '../common/Text';
    import vVideo from '../common/Video';
    import Photos from '../common/Photos';
    import Special from '../common/Special';
    export default {
        data() {
            return {
                loading: 0,
                page: 0,
                rows: 10,
                dataList: [],
                itemInfo: Number(this.$route.params.id),
                navigationType: this.$route.params.type,

                pull: this.$lang.pull,
                loadCompleted: this.$lang.loadCompleted,
                type: 1,
            }
        },
        components:{
            onePhoto, morePhoto, vText, vVideo, Photos, Special
        },
        mounted() {
        },
        methods: {
            refresh(done) {
                this.type = 1;
                this.getNewsList(done);
            },
            infinite(done) {
                this.type = 2;
                this.getNewsList(done);
            },
            getNewsList(done) {
                this.type === 1 ? this.page = 1 : this.page += 1;
                let apiFunction = '';
                let dataObj = {
                    categoryId: this.itemInfo,
                    page: this.page,
                    pagesize: this.rows,
                };
                if (this.navigationType === 'special') {
                    apiFunction = 'special/querySpecialList';
                } else if (this.navigationType === 'video') {
                    dataObj = {
                        modelCode: 'video',
                        categoryId: -1,
                        page: this.page,
                        pagesize: this.rows,
                    };
                    apiFunction = 'news/getNewsPage';
                } else {
                    apiFunction = this.itemInfo === -1 ? 'news/getIndexNewsPage' : 'news/getNewsByCategoryId';
                }
                this.$http(`${this.$host}/${apiFunction}`, 'get', dataObj)
                    .then((data) => {
                        if (data.resCode === 0) {
                            this.loading = 1;
                            let dataList = data.data.dataList;
                            if (!dataList.length) {
                                this.$refs.scroller.finishInfinite(2);
                                return;
                            }
                            for (let i = 0; i < dataList.length; i++) {
                            }
                            if (this.type === 1) {
                                this.dataList = dataList;
                            } else {
                                this.dataList = [...this.dataList, ...dataList];
                            }
                            setTimeout(function () {
                                done();
                            },1000)
                        } else {
                            this.$toast(data.resMsg);
                        }
                    });
            }
        }
    }
</script>

<style scoped>
    .reload {
        height: 100%;
        font-size: 0.1rem;
        color: #999999;
    }
</style>

 

 

滚动条组件属性:

属性名称	描述	需求	默认值
onRefresh	下拉刷新回调	N	-
onInfinite	无限加载回调	N	-
refreshText	自定义下拉刷新文字	N	下拉刷新
noDataText	自定义没有更多数据文字	N	没有更多数据
width	滚动容器宽度	N	100%
height	滚动容器高度	N	100%
snapping	加载图标	N	false
snappingWidth	宽度	N	100 (stand for 100px)
snappingHeight	高度	N	100
refreshLayerColor	下拉刷新文字颜色	N	#AAA
loadingLayerColor	无限加载文字颜色	N	#AAA
minContentHeight	滚动条的最小内容高度 (px)	N	0

实例方法:

• resize() (deprecated, cause the scroller's content resizes self automatically)
• triggerPullToRefresh()
• finishPullToRefresh() 终止下拉刷新
• finishInfinite(isNoMoreData :Boolean) 停止无限加载
• scrollTo(x:Integer, y:Integer, animate:Boolean) 
• scrollBy(x:Integer, y:Integer, animate:Boolean) 滚动滚动内容中的位置
• getPosition :Object 获取滚动内容的当前位置

vue-scroller https://www.npmjs.com/package/vue-scroller（翻译不好，请参考原文api）