uniapp---下拉刷新上拉加载-526互联

在用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>

打完收工！