美文网首页
08-下拉刷新和上拉加载

08-下拉刷新和上拉加载

作者: wqjcarnation | 来源:发表于2021-12-20 14:37 被阅读0次
开启下拉刷新

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

相关文章

  • MJRefresh

    下拉刷新和上拉加载地址

  • 7.28上拉加载,下拉刷新

    iOSUIScrollView的下拉刷新和上拉加载的实现 下面我简单的说一说iosUIScrollView的下拉刷...

  • 下拉刷新和上拉加载更多的原理

    *** 下拉刷新和上拉加载更多的原理*** 一、介绍 在做App开发时,很多时候会用到下拉刷新和上拉加载,比如我比...

  • 08-下拉刷新和上拉加载

    开启下拉刷新[http://notes.xiyanit.cn/#/uniapp/uniapp%E5%9F%BA%E...

  • MJRefresh简单使用

    一、默认下拉刷新和上拉加载更多(通过block) 另一种默认下拉刷新和上拉加载更多(通过action), 有时候我...

  • 2019-01-24

    Android封装一个的下拉刷新,上拉加载控件 ​ 在Android的每个项目中,下拉刷新和上拉加载基本上是必...

  • IOS上拉 下拉刷新

    iOS下拉刷新和上拉刷新 在iOS开发中,我们经常要用到下拉刷新和上拉刷新来加载新的数据,当前这也适合分页。iOS...

  • 项目中常用的一些好的框架

    沉浸式title Immersionbar导入依赖 下拉刷新和上拉加载 SmartRefreshLayout ht...

  • RecyclerViewRefresh

    采用RecyclerView和SwipeRefreshLayout实现下拉刷新和上拉自动加载更多 1.下拉刷新 2...

  • Android上拉加载更多和下拉刷新

    采用SmartRefreshLayout来实现上拉刷新和下拉加载更多:参考:https://github.com/...

网友评论

      本文标题:08-下拉刷新和上拉加载

      本文链接:https://www.haomeiwen.com/subject/nbxyfrtx.html