微信小程序实现下拉刷新事件、上拉触底事件

通过Page页面事件监听下拉刷新事件、上拉触底事件

xxx.json

{"enablePullDownRefresh": false,"onReachBottomDistance": 200
}

xxx.js

Page({.../*** page 绑定的下拉刷新* 页面下拉刷新事件的处理函数*/onPullDownRefresh: function () {console.log("onPullDownRefresh");// 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。},/*** page 绑定的上拉触底* 页面上拉触底事件的处理函数*/onReachBottom: function () {console.log("onReachBottom");},...
})

通过scroll-view监听下拉刷新事件、上拉触底事件

xxx.wxml

<view class="container"><view class="page-body"><view class="page-section"><view class="page-section-title"><text>Vertical Scroll\n纵向滚动</text></view><view class="page-section-spacing"><scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="onUpper" bindscrolltolower="onLower" refresher-enabled="{{true}}" refresher-triggered="{{refreshing}}"><view id="demo1" class="scroll-view-item demo-text-1"></view><view id="demo2"  class="scroll-view-item demo-text-2"></view><view id="demo3" class="scroll-view-item demo-text-3"></view></scroll-view></view></view></view>
</view>
  • bindscrolltoupper: 滚动到顶部时触发。当scroll-view横向时,滚动到左边时触发。
  • bindscrolltolower: 滚动到底部时触发。当scroll-view横向时,滚动到右边时触发。
  • refresher-enabled: true 开启自定义下拉刷新,false 不开启下拉刷新
  • refresher-triggered: 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发

xxx.js

Page({data: {refreshing: false},.../*** scroll-view 组件绑定的下拉刷新* scroll-view 组件下拉刷新事件的处理函数*/onUpper: function () {console.log('onUpper')// 当处理完数据刷新后,停止当前页面的下拉刷新。that.setData({refreshing: false});},/*** scroll-view 组件绑定的上拉触底* scroll-view 组件上拉触底事件的处理函数*/onLower: function () {console.log('onLower')},...
})

参考

微信小程序框架接口:Page
微信小程序页面配置
微信小程序组件:scroll-view

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/192160.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

某60区块链安全之Create2实战一学习记录

区块链安全 文章目录 区块链安全Create2实战一实验目的实验环境实验工具实验原理实验内容Create2实战一 实验步骤分析合约源代码漏洞Create2实战一 实验目的 学会使用python3的web3模块 学会分析以太坊智能合约Create2引发的漏洞及其利用 找到合约漏洞进行分析并形成利用 实…

淘宝/天猫商品详情API接口丨京东商品详情丨1688商品详情丨接口key密钥获取方式

要获取淘宝/天猫商品详情API接口、京东商品详情API接口、1688商品详情API接口以及接口密钥&#xff08;Key&#xff09;&#xff0c;可以按照以下步骤进行操作&#xff1a; 注册并登录淘宝/天猫开发者中心或京东开放平台或1688开放平台&#xff0c;并创建应用。在创建应用的过…

GODOC命令无效,原因是需要手动安装

在看《GO程序设计语言》这本书&#xff0c;按照其中的内容&#xff0c;想看下GO自带的包的文档。 书中讲&#xff0c;可以直接输入GoDOC命令来打开一个服务器&#xff0c;从而可以用浏览器访问文档库。输入命令后&#xff0c;系统提示找不到该命令。 查了资料后才发现&#xff…

6-55.汽车类的继承

根据给定的汽车类vehicle&#xff08;包含的数据成员有车轮个数wheels和车重weight&#xff09;声明&#xff0c;完成其中成员函数的定义&#xff0c;之后再定义其派生类并完成测试。 小车类car是它的派生类&#xff0c;其中包含载人数passenger_load。每个类都有相关数据的输出…

解决Wireshark分析RTMP抓包时Unknown问题

使用Wireshark抓包时&#xff0c;经常出现很多Unknown包&#xff0c;但实际上的字节流实际是正常的。 其实&#xff0c;RTMPT设置里有一个最大包大小的设置&#xff0c;默认是32768&#xff0c;而且默认RTMPT协议配置了从多个TCP流中重组RTMPT的功能(应当是考虑基于HTTP的传输…

Redis RDB

基于内存的 Redis, 数据都是存储在内存中的。 那么如果重启的话, 数据就会丢失。 为了解决这个问题, Redis 提供了 2 种数据持久化的方案: RDB 和 AOF。 RDB 是 Redis 默认的持久化方案。当满足一定条件的时候, 会把当前内存中的数据写入磁盘, 生成一个快照文件 dump.rdb。Redi…

Doris 数据导入三:Routine Load 方式

例行导入(Routine Load)功能为用户提供了一种自动从指定数据源进行数据导入的功能。 1 适用场景 当前仅支持从Kafka系统进行例行导入,使用限制: (1)支持无认证的Kafka访问,以及通过SSL方式认证的Kafka集群。 (2)支持的消息格式为 csv, json 文本格式。csv 每一个 mess…

acwing算法基础之时空复杂度分析

目录 1 基础知识2 模板3 工程化 1 基础知识 &#xff08;一&#xff09; 由数据范围反推算法。 C中题目给出的要求时间是1秒或2秒计算出结果&#xff0c;而1秒内C可以执行 1 0 7 ∼ 1 0 8 10^7 \sim 10^8 107∼108次操作。故需要把时间复杂度控制在 1 0 8 10^8 108以内。 给…

Day48力扣打卡

打卡记录 最大化城市的最小电量&#xff08;二分前缀和差分数组贪心&#xff09; 链接 class Solution:def maxPower(self, stations: List[int], r: int, k: int) -> int:n len(stations)sum list(accumulate(stations, initial0))for i in range(n):stations[i] sum[…

vscode插件离线下载

离线下载插件地址&#xff1a;https://marketplace.visualstudio.com/VSCode

elasticsearch 内网下如何以离线的方式上传任意的huggingFace上的NLP模型(国内闭坑指南)

es自2020年的8.x版本以来&#xff0c;就提供了机器学习的能力。我们可以使用es官方提供的工具eland&#xff0c;将hugging face上的NLP模型&#xff0c;上传到es集群中。利用es的机器学习模块&#xff0c;来运维部署管理模型。配合es的管道处理&#xff0c;来更加便捷的处理数据…

PX4 Bug汇总

个人纪录&#xff0c;不喜勿喷~ 运行仿真 gazebo 没有任何反应 可能是上一次gazebo以外退出&#xff0c;后台还有运行&#xff0c;使用 ps -aux查看&#xff0c;如果有 gzserver Tool 相关的任务&#xff0c;使用 kill -9 杀死它。 例如 ps -aux 输出如下 wind 2919…

css设计文本样式 前端开发入门笔记(十二)

CSS (Cascading Style Sheets) 是一种标记语言&#xff0c;用于描述 HTML 或 XML&#xff08;包括如 SVG、MathML 等派生语言&#xff09;文档的呈现。以下是一些基本的 CSS 文本样式&#xff1a; 字体样式&#xff1a;你可以使用 font-family 属性来改变字体类型&#xff0c;…

vcomp140.dll是什么意思?vcomp140.dll缺失怎么修复的五个方法

在电脑使用过程中&#xff0c;我们常常会遇到一些错误提示&#xff0c;其中之一就是“由于找不到vcomp140.dll无法继续执行代码”。这个错误提示通常出现在运行某些程序时&#xff0c;给使用者带来了很大的困扰。那么&#xff0c;为什么会出现这个错误呢&#xff1f;又该如何解…

云原生高级--shell自动化脚本备份

shell自动化脚本实战---备份 数据库备份&#xff1a; 结合计划任务 MySQL、 Oracle 网站备份&#xff1a; tar&#xff0c;异地保存--ftp、rsync 一、数据库备份 1.利用自带工具mysqldump 实现数据库分库备份 分库备份&#xff1a; 1> 如何获取备份的…

Linux 定时关机 crontab

目录 前言添加定时任务定时关机定时重启其它/bin/sh: shutdown: 未找到命令 参考 前言 CentOS Linux release 7.9.2009 (Core) 添加定时任务 shell> crontab -ecrontab -e 编辑当前用户的定时任务crontab -e 使用vi编辑器 0 2 * * * /sbin/shutdown >> /data/shut…

可视化数据库管理客户端:Adminer

简介&#xff1a;Adminer&#xff08;前身为phpMinAdmin&#xff09;是一个用PHP编写的功能齐全的数据库管理工具。与phpMyAdmin相反&#xff0c;它由一个可以部署到目标服务器的文件组成。Adminer可用于MySQL、PostgreSQL、SQLite、MS SQL、Oracle、Firebird、SimpleDB、Elast…

认知觉醒(二)

认知觉醒(二) 内观自己&#xff0c;摆脱焦虑 第一章 大脑——一切问题的起源 第一节 大脑&#xff1a;重新认识你自己 我猜很多人并不真正了解自己&#xff0c;甚至从未了解过&#xff0c;所以才会对自身的各种问题困惑不已。这里我说的“自己”&#xff0c;特指自己的大…

轻量封装WebGPU渲染系统示例<40>- 多层材质的Mask混合(源码)

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/MaskTextureEffect.ts 当前示例运行效果: 两层材质效果: 三层材质效果: 此示例基于此渲染系统实现&#xff0c;当前示例TypeScript源码如下&#xff1a; export c…

2243:Knight Moves

文章目录 题目描述思路1. DFS2. BFS3. 动态规划 解题方法1. DFS2. BFS3. 动态规划 题目描述 题目链接 翻译如下&#xff1a; 注&#xff1a;骑士移动是和象棋里的马一样走的是日字型 你的一个朋友正在研究旅行骑士问题 &#xff08;TKP&#xff09;&#xff0c;你要找到最短的…