没有更多内容翻页组件封装-微信小程序

<view class="main">
    <van-loading size="24px" wx:if="{{status == 'loading'}}">加载中...</van-loading>
    <text wx:elif="{{status == 'more'}}">{{moreText}}</text>
    <text wx:elif="{{status == 'noMore'}}">{{noMoreText}}</text>
</view>

@import "/styles/cpn-default-style.less";

.main{
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    text-align: center;
    font-size: @cpn-base-font-3;
}

{
    "usingComponents": {
        "van-loading": "@vant/weapp/loading/index"
    }
}

// components/refresh-view/index.js
Component({

    /**
     * 组件的属性列表
     */
    properties: {
        status:{//加载状态 more：未加载 loading:加载中 noMore:加载完成
            type:String,
            value:'more'
        }

    },
    lifetimes: {
        // 组件的生命周期函数，用于声明组件的生命周期
        created() { 
            
        },
        ready() {
            
        },
        attached() {
           
        },
        moved() {
           
        },
        detached() {
            
        },
        
        
    },

    /**
     * 页面的初始数据
     */
    data: {
        moreText: '上拉加载更多',
        loadingText: '加载中...',
        noMoreText: '-- 我是有底线的 --',
    },
    methods: {

    }
    
})

调用

    <refresh-view status="{{loadingType}}" wx:if="{{taskList.length > 0}}"></refresh-view>