前言

Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）
关于怎么拉：对于下拉还是上拉我是分不清的（不管叫下拉还是上拉，都应该有参照物的。在不说参照物的前提下，叫上拉也行，叫下拉也行。）按照uniapp的说法叫用户下拉动作/下拉刷新。本文采用下拉刷新页面的叫法。
实际交流中，很多人把下拉理解为加载更多数据。不管怎么拉，比较保险的交流方式是：配合上手势。一边比划一边说。

如何实现

uniapp 内置提供了名为 onPullDownRefresh 的页面生命周期函数。该函数可以实现下拉刷新页面的功能。

监听用户下拉动作，一般用于下拉刷新

注意事项

支付宝小程序startPullDownRefresh在开发者工具里会提示暂未开放，请勿使用。

此种情况下，去uniapp的插件市场搜索其它方法。

另，调用uni.startPullDownRefresh函数的效果与用户手动下拉刷新一致。

实现

开启下拉刷新页面的功能

需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。

 "pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页","enablePullDownRefresh":true,}}]

onPullDownRefresh 函数

index.vue

<script>export default {components: {},data() {return {}},async onLoad(options) {console.log("onLoad")},onReady(){},async onPullDownRefresh() {console.log("onPullDownRefresh");},methods: {}}
</script>

停止下拉刷新的动画

当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

下拉刷新的动画会自动停止，但为了更好的体验，手动停止更好一些。

async onPullDownRefresh() {console.log("onPullDownRefresh");await this.loadFavorite();uni.stopPullDownRefresh();
},

参考

https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f

【uniapp】下拉刷新页面相关推荐

uniapp下拉刷新避坑指南
uniapp下拉刷新 uniapp的下拉刷新有两个方法, 一种是整体的下拉刷新, 使用页面生命周期函数onPullDownRefresh; 另外一种是局部的下拉刷新也叫自定义下拉刷新, 使用scrpl ...
uniapp 下拉刷新
uniapp 下拉刷新(全局&单页面) 全局设置在pages.json文件的globalStyle对象中开启enablePullDownRefresh属性单页面在pages.json文件 ...
Android 天气APP（十）继续优化、下拉刷新页面天气数据
上一篇:Android 天气APP(九)细节优化.必应每日一图修复每日一图,增加下拉刷新,滑动改变标题新版------------------- 一.修复每日请求必应壁纸Bug 二.增加下拉刷新 ...
【微信小程序】下拉刷新页面
小程序下拉刷新页面废话不多说直接上代码 .json "enablePullDownRefresh": true,//是否开启下拉"backgroundTextStyl ...
微信小程序通过wx.redirectTo,实现单页面刷新效果＆下拉刷新页面数据效果
微信小程序通过wx.redirectTo,实现单页面刷新效果 & 下拉刷新页面数据效果一: 使用 wx.redirectTo(),实现页面刷新数据效果 API说明: 关闭当前页面,跳转到应 ...
uni-app下拉刷新、上拉加载更多实现
下拉刷新下拉刷新文档在 js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件. 需要在 pages.json 里,找到的当前页 ...
微信小程序下拉刷新页面时的加载状态
案发现场:在微信小程序中,用力往下拉动,页面顶部会出现一段空白的地方. 其实三个点是可以看到的.只不过默认是白色的案例效果 1.在 app.json中添加样式 "backgroundTe ...
Android高级控件之ListView的优化以及下拉刷新页面
1.ListView的优化在优化之前我们先来说说配置器的自定义,为什么需要自定义配置器呢,因为系统自带的配置器不能满足我们的需求,所以就需要我们自己写配置器来实现功能, 但是在创建ListView时 ...
html5实现下拉刷新页面,原生js实现简单的下拉刷新功能
前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...

【uniapp】下拉刷新页面

前言

如何实现

注意事项

实现

开启下拉刷新页面的功能

onPullDownRefresh 函数

停止下拉刷新的动画

参考

【uniapp】下拉刷新页面相关推荐

最新文章

热门文章

【uniapp】 下拉刷新页面

前言

如何实现

注意事项

实现

开启下拉刷新页面的功能

onPullDownRefresh 函数

停止下拉刷新的动画

参考

【uniapp】 下拉刷新页面相关推荐

最新文章

热门文章

【uniapp】下拉刷新页面

【uniapp】下拉刷新页面相关推荐