mint-ui / mint-loadmore Goto Github PK

<template>
	<div>
		<loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
		  <ul>
		    	<li v-for="item in list">{{ item }}</li>
		  </ul>
		</loadmore>
	</div>
</template>
<script type="text/javascript-6">
	import loadmore from 'vue-loadmore';
	export default {
		data(){
			return {
				list: [],
				allLoaded: false
			}
		},
		components:{
			loadmore
		},
		methods:{
			loadTop(id){
				console.log(1);
				this.$refs.loadmore.onTopLoaded();
			},
			loadBottom(id) {
				this.allLoaded = true;// 若数据已全部获取完毕
    			this.$refs.loadmore.onBottomLoaded();
			}
		}
	}
</script>
<style scoped>
	
</style>

ReferenceError: _h is not defined

<template>
    <div class="page health-tips">
        <common-header></common-header>
        <section class="no-footer">
            <load-more :bottom-method="loadBottom" :bottom-status.sync="bottomStatus" :bottom-distance="distance" :auto-fill="autoFill">
                <div>
                    <div class="text-img-card" v-for="tip in tips" v-link="{path: '/' + $route.pageData.modelName + '/' + $index+ '/' + tip.id}" track-by="$index">
                        <div class="image" v-if="tip.image"><img :src="tip.image"></div>
                        <div class="title">{{tip.title}}</div>
                        <p class="content">{{{tip.content}}}</p>
                    </div>
                </div>
            </load-more>
            <toast type="loading" v-show="loadingData">数据加载中</toast>
        </section>
    </div>
</template>
<style lang="less" rel="stylesheet/less" scoped>
    @import '../assets/var';
    section {
        padding: 36/@rem 36/@rem 50px 36/@rem;
        background: #f6f6f6;
    }
    .text-img-card {
        padding: 20/@rem;
        .boxShadowForBlock;
        background-color: #fff;
        margin-bottom: 20/@rem;
        border-radius: 6px;
        .image {
            width: 100%;
            img {
                width: 100%;
            }
        }
        .title {
            height: 70/@rem;
            display: flex;
            align-items: center;
            font-size: 30/@rem;
        }
        .content {
            font-size: 24/@rem;
            color: #999;
        }
    }

</style>
<script>
    import loadMore from 'mint-loadmore'
    import commonHeader from './header'
    import toast from './toast'
    import store from './store/health-tips'

    let getType = function (o) {
        return ({}).toString.call(o).replace(/\[object\s(.*)\]/, '$1').toLowerCase();
    };

    //todo:加载更多

    export default{
        data(){
            let self = this;
            return {
                loadingData: false,
                tips: [],
                currentPage: 1,
                lastPage: 1,
                total:1,
                distance: 120,
                bottomStatus: '',
                autoFill: false,
                queryType:(function (me) {
                    let type = 0;
                    switch (me.$route.pageData.modelName){
                        case 'medical_guide':
                            type = 1;
                            break;
                        case 'health_tips':
                            type = 2;
                            break;
                    }
                    return type;
                })(self)
            }
        },
        components:{
            commonHeader,
            toast,
            loadMore
        },
        methods:{
            loadBottom(id){
                this.$resource(`/api/article?type=${this.queryType}&page=${this.nextPage}`).query().then(function (res) {
                    store.tips = res.data;
                    this.currentPage = store.tips.current_page;
                    this.lastPage = store.tips.last_page;
                    this.total = store.tips.total;
                    let l = store.tips.data.length, i = 0;
                    for(; i < l; i++){
                        this.tips.push(store.tips.data[i]);
                    }
                    this.$broadcast('onBottomLoaded', id);
                });
            },
            a(){
                console.log(1);
            }
        },
        route: {
            data (transition){
                this.loadingData = true;
                this.$resource(`/api/article?type=${this.queryType}&page=${this.currentPage}`).query().then(function (res) {
                    this.loadingData = false;
                    store.tips = res.data;
                    transition.next({
                        tips: store.tips.data,
                        currentPage: store.tips.current_page,
                        lastPage: store.tips.last_page,
                        total: store.tips.total
                    });
                });
            }
        }
    }
</script>