uni-app 动态控制下拉刷新

蔚落 2022-12-21 03:15 219阅读 0赞

扫码查看搜索：uni-app 动态控制下拉刷新  
![在这里插入图片描述][20201114095148927.bmp_pic_center]

前置条件：  
开发环境：windows  
开发框架：uni-app , H5+，nativeJS  
编辑器：HbuilderX 2.8.13  
兼容版本：安卓，IOS已作测试  
此代码可以直接复制到uni-app项目中使用  
正文开始：

1.  首先，在 pages.json 中配置目标页面的 style->enablePullDownRefresh 为 true。  
    page.json代码如下：

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

1.  在具体逻辑页面:获取当前 Webview 窗口对象

onst pages = getCurrentPages();  
    const page = pages[pages.length - 1];  
    const currentWebview = page.$getAppWebview();

1.  1 根据状态值来切换禁用/开启下拉刷新

let isreload=false
    currentWebview.setStyle({   
      pullToRefresh: { 
        // false关闭下拉刷新；isreload可使用变量动态赋值 
        support: isreload,  
        style: plus.os.name === 'Android' ? 'circle' : 'default'  
      }  
    });

这里调用 plus 的 API，是在条件编译下进行的  
4. 注意事项  
此功能仅在 5+App 环境下支持，因此示例中用到了条件编译。  
pages.json 中的 页面->style->enablePullDownRefresh 必须为 true，也就是说初始化时必须是开启状态。  
iOS上，关闭bounce回弹效果，另见bounce相关的配置和API。

[20201114095148927.bmp_pic_center]: /images/20221120/fda76aac38904ddfa3949ab9e5ff7947.png

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 下拉刷新

这里，最好仔细看一下scroll-view组件的api介绍。scroll-view | uni-app官网//开启自定义下拉刷新//初始情况下，关闭刷新状态/*自定义下拉...

以你之姓@/ 2024年04月22日 15:15/ 0 赞/ 109 阅读

相关下拉刷新功能实现 uniapp篇

下拉刷新功能实现首先配置 page,json 某个页面开启下拉刷新参数 “enablePullDownRefresh”:true, 加粗文本 //监

末蓝、/ 2023年02月24日 07:50/ 0 赞/ 31 阅读

相关 uniapp下拉刷新避坑指南

uniapp下拉刷新 > uniapp的下拉刷新有两个方法, 一种是整体的下拉刷新, 使用页面生命周期函数onPullDownRefresh; 另外一种是局部的下拉刷新也

川长思鸟来/ 2022年12月30日 01:23/ 0 赞/ 425 阅读

相关 uni-app 动态控制下拉刷新

扫码查看搜索：uni-app 动态控制下拉刷新 ![在这里插入图片描述][20201114095148927.bmp_pic_center] 前置条件：开发环境：w

蔚落/ 2022年12月21日 03:15/ 0 赞/ 220 阅读

相关 uniapp下拉刷新

// 下拉刷新 onPullDownRefresh(){ console.log('刷新中'); setTimeout(fun

短命女/ 2022年11月08日 14:07/ 0 赞/ 261 阅读

相关 uniapp下拉刷新

scroll-view下拉刷新（仅仅支持微信小程序） <template> <scroll-view scroll-y="true" style="h

清疚/ 2022年09月13日 04:07/ 0 赞/ 331 阅读

相关 uniapp下拉刷新上拉加载

一、需求留言板主页，显示所有的留言信息，带有分页功能；上拉加载数据，下拉刷新数据二、代码 ![在这里插入图片描述][watermark_t

﹏ヽ暗。殇╰゛Y/ 2021年09月03日 04:51/ 0 赞/ 747 阅读

相关 uniapp——下拉刷新的学习

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

迷南。/ 2021年07月26日 01:27/ 0 赞/ 433 阅读

相关 uniapp下拉刷新和触底

效果图： ![20210306115501184.gif][] 代码实现：结构目录： ![20210306113541858.png][] pages.js

阳光穿透心脏的1/2处/ 2021年07月25日 16:53/ 0 赞/ 778 阅读

相关 uniapp 下拉刷新

全局开启 pages.json中->globalStyle "enablePullDownRefresh":true, 单页面开启

待我称王封你为后i/ 2021年07月24日 17:51/ 0 赞/ 519 阅读