uniapp 下拉刷新 与基础加载动画显示

1.在pages.json 里面将需要刷新的页面 配置

"path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                "enablePullDownRefresh": true
            }

2.在刷新页面 写onPullDownRefresh()与methods 同级别

onPullDownRefresh() {
    //1.先把需要刷新的数据清空
        this.list = []
    //2.调用加载中动画
        uni.showLoading({
          title: '加载中...'
        });
    //3.发送请求
    //4.成功回调里面加入停止刷新与隐藏加载框
        uni.hideLoading();
        uni.stopPullDownRefresh()
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp中,可以使用uni的内置组件来实现下拉刷新和上划加载更多的功能。 下拉刷新是指在页面顶部下拉时触发的刷新操作。可以通过在页面的<template>中使用<uni-scroll-view>组件,并设置refresher属性为true,然后在<uni-scroll-view>组件的bindrefresh事件中添加下拉刷新的逻辑代码。具体实现如下: <template> <view> <uni-scroll-view refresher="{{ true }}" bindrefresh="onRefresh"> <view>下拉刷新内容</view> </uni-scroll-view> </view> </template> <script> export default { methods: { onRefresh() { // 下拉刷新逻辑代码 // 例如请求数据,更新页面内容等操作 // 刷新完成后,调用uni.stopPullDownRefresh()方法停止下拉刷新动画 } } } </script> 上划加载更多是指在页面底部上划时触发的加载更多操作。可以通过在页面的<template>中使用<uni-scroll-view>组件,并设置scroll-y属性为true,然后在<uni-scroll-view>组件的bindscrolltolower事件中添加上划加载更多的逻辑代码。具体实现如下: <template> <view> <uni-scroll-view scroll-y="{{ true }}" bindscrolltolower="onLoadMore"> <view>上划加载更多内容</view> </uni-scroll-view> </view> </template> <script> export default { methods: { onLoadMore() { // 上划加载更多逻辑代码 // 例如请求下一页数据,追加到页面内容中等操作 } } } </script> 通过以上方式,可以在uniapp中实现下拉刷新和上划加载更多的功能,提升用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值