uni-app在app端设置下拉刷新不生效

这篇具有很好参考价值的文章主要介绍了uni-app在app端设置下拉刷新不生效。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

下拉刷新这个问题,查了老半天。
我这只小菜鸡,完全不知道view和scroll-view是不一样的!

问题现象:

按照官网的方式,
1. 在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh: true
2. 在页面中使用uni.startPullDownRefresh();以及uni.stopPullDownRefresh();
可是可是,我在浏览器调试是正确的,下拉刷新loading以及打印的log完全没问题,但是打包成app装在手机里就不行了,下拉完全没效果。

解决过程

view中使用onPullDownRefresh:

如果你用的view组件,那使用官网提供的onPullDownRefresh方法是没有问题的,代码如下:

    onPullDownRefresh() {
        uni.startPullDownRefresh({
            success() {
                uni.showToast({
                    title: "下拉刷新",
                    icon: 'none'
                })
            },
            complete() {
                uni.stopPullDownRefresh()
            }
        });
    },

但如果在scroll-view中使用,是没有效果的!

scroll-view中使用@refresherrefresh

链接提供给大家,可以看下scroll-view的使用文档。原来scroll-view有一套自己的刷新方法。

  1. refresher-enabled设置为true
  2. 定义refresher-triggered,也就是刷新开始和结束的标志
  3. 写@refresherrefresh方法

代码如下:

<!-- html -->
<scroll-view refresher-enabled="true" :refresher-triggered="trigger" @refresherrefresh="refresherrefresh"></scroll-view>
// js
 refresherrefresh() {
     this.trigger = true;
     this.doSomething(); // 调用你的方法
     setTimeout(() => {
         this.trigger = false;
     }, 1000);
 },

打包,大功告成,完美解决。

还不快去试试!文章来源地址https://www.toymoban.com/news/detail-669004.html

到了这里,关于uni-app在app端设置下拉刷新不生效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app顶部下拉舒心

    操作步骤 基于 scroll-view 组件实现下拉刷新,需要通过以下方式来实现下拉刷新的功能。 配置 refresher-enabled 属性,开启下拉刷新交互 监听 @refresherrefresh 事件,判断用户是否执行了下拉操作 配置 refresher-triggered 属性,关闭下拉状态

    2024年01月24日
    浏览(41)
  • uni-app:scroll-view滚动盒子,实现横(纵)向滚动条

    参照:scroll-view | uni-app官网 (dcloud.net.cn) 样式:     代码: 扩展:要设置纵向滚动条同理 只是需要将盒子高度小于实际小块的高度,就不会将元素完全展示,再给盒子加上scroll-y=\\\"true\\\"(允许纵向滚动),即可 效果如下:  代码:

    2024年02月17日
    浏览(54)
  • uni-app:刷新当前页面

    执行这三行代码就可以实现uniapp刷新当前页面。不论是tabbar还是page页面 * * * * * * * * * * * * * * * *

    2024年02月11日
    浏览(49)
  • uni-app 自定义下拉框

    如图:     html: view class=\\\"row-item\\\" view class=\\\"lable-tit\\\"性别:/view view class=\\\"selected-all\\\" view class=\\\"drop-down-box\\\" @click=\\\"btnShowHideClick\\\" text class=\\\"dropdown-content\\\"{{choiceContent}}/text image class=\\\"dropdown-icon\\\" src=\\\"/static/down.png\\\" mode=\\\"widthFix\\\"/image /view  view class=\\\"dialog-view\\\" v-if=\\\"isShowChoice\\\" text :class=\\\"choiceI

    2023年04月19日
    浏览(44)
  • uni-app中select下拉菜单

    select-lay - DCloud 插件市场

    2024年02月12日
    浏览(40)
  • [uni-app] scroll-view中吸顶的简单做法 - overflow-y: auto;

    记录一个css技巧 overflow-y: auto; 要实现scroll内部 , .top 吸顶 , .content 内容上下滚动的效果, 只要在 .content 添加 overflow-y: auto; overflow-y官网描述

    2024年02月09日
    浏览(43)
  • uni-app 微信小程序 onReachBottom 不生效

    问题描述: uni-app 微信小程序,页面滑到底部,onReachBottom 没有生效 代码: pages.json 配置 使用 onReachBottom 的页面: 总结: 最外层容器设置 min-height: 100.1vh

    2024年02月07日
    浏览(53)
  • uni-app下拉框 可实现输入下拉框 搜索+选择组合框功能

    插件示例地址

    2024年02月11日
    浏览(55)
  • uni-app返回上一个页面并进行页面刷新

    适用两个不同的页面跳转,返回上一个页面保存并刷新修改后的数据(也解决了uni-app的navigateBack返回不刷新的方法之一) 当前页: 上一页: 思路: 1、用getCurrentPages()获取打开的页面 2、保存当前页面和上一个页面 提示:不确定是不是从当前页跳转到上一页就console.log(pages[pa

    2024年02月12日
    浏览(58)
  • uni-app封装省市区下拉组件(后台获取数据)

    一.后台数据格式  PROCINCE:[{itemName:\\\'\\\',itemValue:\\\'\\\'}] CITY:[{itemName:\\\'\\\',itemValue}] AREA:[{itemName:\\\'\\\',itemValue}] 前端将地址数据缓存在了pinia中 前端主要使用picker进行勾选 二.代码

    2024年02月12日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包