uniapp---下拉刷新上拉加載

在用uniapp做APP的時候，下拉刷新，上拉加載是常見的功能需求，現在整理一下：

 第一步：設置下拉和上拉屬性

找到【pages.json】設置：

"enablePullDownRefresh": true,
"onReachBottomDistance": 100,

示例：

 第二步：頁面新增下拉和上拉方法

onPullDownRefresh
onReachBottom

示例：

<script>
    import bottom from '@/components/bottom.vue'
    export default {
        components:{ bottom },
        data() {
            return {
                loadmore:'加載更多',
                list:[
                    { id:1,type:'訂單消息',content:'您的訂單已取消~' },
                    { id:1,type:'系統消息',content:'您的訂單已取消~' },
                ]
            }
        },
        onLoad() {},
        onPullDownRefresh(){
            this.getList();
        },
        onReachBottom() {
            this.getList();
        },
        methods: {
            getList(){
                let that = this;
                console.log('get list');
                setTimeout(()=>{
                    for(let i=0; i<20; i++){
                        that.list.push({ id: i, type: '系統消息', content: '您的訂單已取消~' });
                    }
                },1000);
                uni.stopPullDownRefresh();
            },
        }
    }
</script>

打完收工！