08-下拉刷新和上拉加载

开启下拉刷新

在uni-app中有两种方式开启下拉刷新

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
• 通过调用uni.startPullDownRefresh方法来开启下拉刷新

通过配置文件开启

创建list页面进行演示

<template>
    <view>
        杭州学科
        <view v-for="(item,index) in arr" :key="index">
            {{item}}
        </view>
    </view>
</template>

<script>
    export default {
        data () {
            return {
                arr: ['前端','java','ui','大数据']
            }
        }
    }
</script>

<style>
</style>

通过pages.json文件中找到当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh

{
  "path":"pages/list/list",
    "style":{
      "enablePullDownRefresh": true
    }
}

通过API开启

api文档

uni.startPullDownRefresh()

监听下拉刷新

通过onPullDownRefresh可以监听到下拉刷新的动作

export default {
  data () {
    return {
      arr: ['前端','java','ui','大数据']
    }
  },
  methods: {
    startPull () {
      uni.startPullDownRefresh()
    }
  },
  onPullDownRefresh () {
    console.log('触发下拉刷新了')
  }
}

关闭下拉刷新

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

案例演示

<template>
    <view>
        <button type="primary" @click="startPull">开启下拉刷新</button>
        杭州学科
        <view v-for="(item,index) in arr" :key="index">
            {{item}}
        </view>
    </view>
</template>
<script>
    export default {
        data () {
            return {
                arr: ['前端','java','ui','大数据']
            }
        },
        methods: {
            startPull () {
                uni.startPullDownRefresh()
            }
        },

        onPullDownRefresh () {
            this.arr = []
            setTimeout(()=> {
                this.arr = ['前端','java','ui','大数据']
                uni.stopPullDownRefresh()
            }, 1000);
        }
    }
</script>

上拉加载

通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px

通过onReachBottom监听到触底的行为

<template>
    <view>
        <button type="primary" @click="startPull">开启下拉刷新</button>
        杭州学科
        <view v-for="(item,index) in arr" :key="index">
            {{item}}
        </view>
    </view>
</template>
<script>
    export default {
        data () {
            return {
                arr: ['前端','java','ui','大数据','前端','java','ui','大数据']
            }
        },
        onReachBottom () {
            console.log('触底了')
        }
    }
</script>

<style>
    view{
        height: 100px;
        line-height: 100px;
    }
</style>