#Uniapp:onPullDownRefresh下拉刷新 和阻止stopPullDownRefresh

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

页面下拉刷新周期

局部配置页面下拉刷新
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/message/message",
			"style": {
				"navigationBarTitleText": "信息",
				"enablePullDownRefresh": true,
				"navigationBarBackgroundColor": "#00ff00",
				"h5": { // h5页面特定样式
					"titleNView": {
						"backgroundColor": "#ffff00"
					}
				}
			}
		}]
触发下拉刷新的生命周期—监听用户下拉动作,一般用于下拉刷新,
onPullDownRefresh() {
			console.log('下拉刷新')
		}

uni.stopPullDownRefresh()

停止当前页面下拉刷新。文章来源地址https://www.toymoban.com/news/detail-817913.html

示例

// 仅做示例,实际开发中延时根据需求来使用。
export default {
	data() {
		return {
			text: 'uni-app'
		}
	},
	onLoad: function (options) {
		setTimeout(function () {
			console.log('start pulldown');
		}, 1000);
		uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
		console.log('refresh');
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
}

到了这里,关于#Uniapp:onPullDownRefresh下拉刷新 和阻止stopPullDownRefresh的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • uniapp使用自带【刷新方法】与使用【scroll-view】实现下拉刷新上拉加载

    前言:uniapp自带下拉刷新,上拉加载功能基本可以满足刷新需求,但是顶部有状态栏的页面就得进行特殊处理,使用scroll-view解决,状态栏会连带被下拉问题   1、uniapp自带下拉刷新、上拉加载 在page.json中对应页面路由设置【enablePullDownRefresh】值为true(开启下拉刷新) 代码:

    2024年02月11日
    浏览(47)
  • uniapp scroll-view用法[下拉刷新,触底事件等等...](4)

    话不多说 直接上官网属性  官网示例  讲一下常用的几个 @scroll  滚动时触发  @scrolltoupper 滚动到顶部或左边,会触发 scrolltoupper 事件 @scrolltolower   滚动到底部或右边,会触发 scrolltolower 事件 1.纵向滚动 设置scroll-y=\\\"true\\\"  开启纵向滚动功能 2.横向滚动 设置scroll-x=\\\"true\\\"  开

    2024年01月25日
    浏览(52)
  • uniapp开发使用插件z-paging实现页面下拉刷新、上拉加载,分页加载

    在uniapp官网有一个比较好用的插件z-paging,可以实现多条数据滚动显示或者自定义下拉刷新,分页显示......在开发消息页面或者app开发需要大量的页面刷新,页面内容过长,减轻服务器的负担就可以使用此插件,进入app智慧加载部分内容,等到再次需要之后的内容就再次加载

    2024年02月11日
    浏览(52)
  • uniapp小程序如何通过虚拟列表配合节流,完成上拉刷新下拉加载,避免页面卡顿,提升性能呢?

    本文将介绍uniapp小程序中如何使用虚拟列表和节流两种技术实现上拉刷新下拉加载功能,同时避免因渲染大量数据导致的页面卡顿问题。 一、虚拟列表 在uniapp小程序开发中,当我们需要渲染大量列表数据时,很容易出现页面卡顿现象。这时候,我们可以使用虚拟列表技术来

    2024年02月11日
    浏览(45)
  • 微信小程序——页面事件,.启用下拉刷新监听页面的下拉刷新事件,上拉触底事件,停止下拉刷新的效果

    下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。 启用下拉刷新有两种方式: a.全局开启下拉刷新 在 app.json 的window 节点中,将 enablePullDownRefresh 设置为 true. b.局部开启下拉刷新 在页面的.json 配置文件中,将 enablePull

    2024年01月25日
    浏览(57)
  • 【微信小程序插件】下拉刷新、下拉加载

    今天在优化小程序的列表时候,想要把原生的 scroll-view 组件替换成一个下拉刷新的组件,然后就找了一下,果然有大神已经封装好。coolui-scroller 就是这样满足需求的一款插件,但是微信官网给出的描述以及安装引入的方式,会造成依赖安装失败,报错: 构建npm提示错误,未

    2024年02月08日
    浏览(84)
  • 小程序中scroll-view的下拉刷新和小程序页面的下拉刷新开启方法

    scroll-view的下拉刷新 video.wxml中 video.js中 页面的下拉刷新 video.json中添加enablePullDownRefresh为true就可以开启

    2024年02月16日
    浏览(44)
  • 小程序下拉刷新的实现

    1.使用onPullDownRefresh()这个方法来实现下拉刷新 例子如下:  注意事项:需要将要加载的函数在 onPullDownRefresh() 这个事件方法里面调用。 2.使用wx.stopPullDownRefresh()停止下拉刷新 使用方式需要在你页面调用接口的最后一个方法中执行,就可实现。 3.其中最重要的一步,最容易被忽

    2024年02月15日
    浏览(41)
  • 小程序如何实现下拉刷新

    要在小程序中实现下拉刷新功能,您可以使用小程序提供的页面生命周期函数和相关 API 来实现。下面是一般的步骤: 在页面的 JSON 配置文件中开启下拉刷新 在对应页面的 JavaScript 文件中,监听下拉刷新事件 onPulDownRefresh: 在onPullDownRefresh 函数中编写下拉刷新的逻辑,例如发

    2024年02月06日
    浏览(33)
  • 微信小程序学习实录2(下拉刷新、下拉加载更多、小程序事件、PHP后端代码、刷新无数据解决方案)

    lazyCodeLoading基础库 2.11.1 及以上版本支持,2.11.1 以下兼容但无优化效果 通常情况下,在小程序启动期间,所有页面及自定义组件的代码都会进行注入,当前页面没有使用到的自定义组件和页面在注入后其实并没有被使用。自基础库版本 2.11.1 起,小程序支持有选择地注入必要

    2024年02月05日
    浏览(49)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包