微信小程序-scroll-view实现上拉加载和下拉刷新

一.scroll-view实现上拉加载

scroll-view组件通过自身一些属性实现上拉加载的功能。

lower-threshold=“100"属性表示距离底部多少px就会实现触发下拉加载的事件。
类似于在.json文件里面配置"onReachBottomDistance”: 100

bindscrolltolower="getMore"属性是监听下拉加载的所绑定的方法。
enable-back-to-top属性设置为ture表示点击状态栏或者标题栏回到顶部位置。

代码如下:

<scroll-view scroll-y="true"
class="scroll-y"lower-threshold="100"
bindscrolltolower="getMore"
enable-back-to-top
>
<view wx:for="{{numList}}" wx:key="*this">{{item}}</view>
</scroll-view>

监听下拉事件的方法(相当于onReachBottom):

getMore(){console.log(2)wx.showLoading({title: '数据加载中...',})setTimeout(()=>{const lastNum=this.data.numList[this.data.numList.length-1]const newAry=[lastNum+1,lastNum+2,lastNum+3]this.setData({numList:[...this.data.numList,...newAry]})wx.hideLoading()},1500)}

二.上拉刷新

refresher-enabled : 是否允许上拉刷新,相当于enablePullDownRefresh
refresher-default-style=“black” :刷新时候的小圆点颜色,相当于backgroundTextStyle
refresher-background=“#f7f7f8” : 刷新时候的背景颜色,相当于backgroundColor
bindrefresherrefresh=“refresh” :监听刷新时候的方法,相当于onPullDownRefresh
refresher-triggered=“{{istriggered}}” :刷新完毕后进行刷新区域的关闭,相当于方法wx.stopPullDownRefresh()

<scroll-view scroll-y="true"
class="scroll-y"refresher-enabledrefresher-default-style="black"refresher-background="#f7f7f8"bindrefresherrefresh="refresh"refresher-triggered="{{istriggered}}"
>
<view wx:for="{{numList}}" wx:key="*this">{{item}}</view>
</scroll-view>

监听刷新事件的方法:

  refresh(){console.log(1)wx.showToast({title: '下拉刷新...',})this.setData({numList:[1,2,3],istriggered:false})}

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

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

相关文章

测评:【ONLYOFFICE】版本更迭与AI加持下的最新ONLYOFFICE桌面编辑器8.1

你是否还在为没有一款合适的在线桌面编辑器而苦恼&#xff1f;你是否还在因为办公软件的选择过少而只能使用WPS或者office&#xff1f;随着办公需求的不断变化和发展&#xff0c;办公软件也在不断更新和改进。ONLYOFFICE 作为一款全功能办公软件&#xff0c;一直致力于为用户提…

WordPress如何删除前端评论中的网址字段?

前面跟大家分享的『WordPress插件Comment Link Remove and Other Comment Tools&#xff0c;删除评论网址字段』一文&#xff0c;通过安装插件可轻松删除前端评论中的网址字段&#xff0c;不过有些站长不喜欢安装插件&#xff0c;那么是否可以通过纯代码去掉网址字段呢&#xf…

车辆检测之图像识别

1. 导入资源包 import torch.nn as nn import tkinter as tk from tkinter import filedialog, messagebox from PIL import Image, ImageTk,ImageDraw,ImageFont import torch from torchvision import transforms, models from efficientnet_pytorch import EfficientNet im…

微信QQ视频裂变加群推广强制分享引流系统

用户在达到一定观看次数后&#xff0c;需要分享给好友或群组。只有好友点击推广链接后&#xff0c;观看次数才会增加。 通过引导用户分享至QQ和微信&#xff0c;实现快速裂变引流的效果&#xff01; 视频裂变推广程序通过强制分享链接&#xff0c;引导用户转发&#xff0c;从…

代理IP知识:导致代理IP访问超时的原因有哪些?

很多用户在使用代理IP进行网络访问时&#xff0c;可能会遇到代理IP超时的情况&#xff0c;也就是代理IP的延迟过高。代理IP延迟过高会影响用户的网络体验和数据获取效率。因此&#xff0c;了解代理IP延迟过高的原因很重要。以下是导致代理IP延迟过高的一些常见原因&#xff1a;…

怎么使用RSI指标分析现货黄金行情走势?

拿到一波现货黄金行情走势&#xff0c;如何着手对其进行分析呢&#xff1f;投资者只要在网络上搜索一下&#xff0c;保管能够找到各种各样的答案&#xff0c;而本文要讨论的就是其中一种&#xff0c;我们借助RSI指标进行分析。 RSI就是相对强弱指标的简称&#xff0c;这是市场中…

炎炎夏日,矿物质水为你防暑补水

炎炎夏日&#xff0c;整座城市如同一个巨大的“烤箱” 人们行走在炙热烈阳中 汗如雨下&#xff0c;口干舌燥 在这样的高温天气中 中暑的风险也随之增加 烈日当头的夏天 该如何预防中暑呢&#xff1f; 或许答案藏在一杯矿物质水中 为什么矿物质水能够预防中暑&#xff1f;…

编译xlnt开源库源码, 使用c++读写excel文件

编译xlnt开源库源码,在linux平台使用c读写excel文件 下载xnlt源码 官方网站https://tfussell.gitbooks.io/xlnt/content/ 下载地址https://github.com/tfussell/xlnt 下载libstudxml开源库源码 下载地址https://github.com/kamxgal/libstudxml 下载xnlt源码 官方网站https://…

项目启动端口被占用

项目启动端口被占用 Identify and stop the process that’s listening on port XXXX or configure this application to listen on another port. 1、查询占用端口的pid netstat -aon|findstr "端口号"2、终止进程 taskkill /pid 进程号 /f3、重启项目

宝宝早教电子图书 酷得电子方案

宝宝早教发声书是一种专为婴幼儿设计的图书&#xff0c;旨在通过有趣的图画和声音来吸引宝宝的注意力&#xff0c;帮助他们学习语言、认知和发展各种技能。这类书籍通常包括以下特点&#xff1a; 鲜艳的图画&#xff1a;发声书通常配有色彩鲜艳、形象生动的图画&#xff0c;以…

Ceph入门到精通-shell脚本读取指定文件,并按行使用rclone命令进行复制操作

要使用shell脚本读取指定文件,并按行使用rclone命令进行复制操作,您可以编写一个简单的脚本来实现这一功能。以下是一个示例脚本,它将读取指定文件的每一行,然后使用rclone copy命令将远程存储中的文件复制到本地目录。 首先,创建一个新的shell脚本文件,例如download_fi…

Java Matcher类方法深度剖析:查找和匹配、索引方法

1. 引言 在Java中,正则表达式是处理字符串的强大工具,而java.util.regex包中的Matcher类则是实现这一功能的核心。对于Java工程师而言,熟练掌握Matcher类的使用方法,无疑能够极大地提升字符串处理的效率和准确性。本文将对Matcher类的方法进行深度讲解,并按照查找和匹配方…

el-tree检查当前节点是否是传入节点的父级或祖先节点

实现的效果就是&#xff1a;树形结构选中一个目录后点击收起的时候需要知道当前收起的是不是选中目录的父节点或者是祖先节点 这就用到了递归&#xff0c;什么是递归呢&#xff1f;简单来说递归就是方法自己调用自己&#xff0c;每次调用时传入不同的变量。一直到程序执行到指定…

spring的bean定义和扫描规则

1、bean的基本定义 在Spring框架中&#xff0c;Bean是一个核心概念&#xff0c;它是Spring IoC&#xff08;Inverse of Control&#xff0c;控制反转&#xff09;容器管理的一个对象实例。简单来说&#xff0c;Bean就是由Spring容器初始化、配置和管理的对象。这些对象可以是J…

算法06 贪心算法【C++实现】

我们可以扮演一个贪心的人&#xff0c;在金子、银、铁中选择装入背包带走的话&#xff0c;作为一个贪心的人&#xff0c;肯定要把价值最大化&#xff0c;优先要选择装载价值较高的金子。 目录 什么是贪心算法 证明方法 常见题型 常见题型解法 训练&#xff1a;小木船过河 …

WARP 加速您的 AI 数据存储基础设施

你知道一些最好的人工智能模型的秘诀吗&#xff1f;这是他们可以访问的数据量&#xff0c;他们可以接受培训。对于 AI/ML 模型&#xff1a;快速访问数据为王。让我强调一下&#xff0c;这不仅仅是数据&#xff0c;而是快速访问的数据。如果有人可以构建更快、更强大的模型&…

骚操作:如何让一个网页一直处于空白情况?

&#x1f9d1;‍&#x1f4bb; 写在开头 点赞 收藏 学会&#x1f923;&#x1f923;&#x1f923; 如题&#xff0c;惯性思路很简单&#xff0c;就是直接撸上一个空内容的html。 注&#xff1a;以下都是在现代浏览器中执行&#xff0c;主要为**Chrome 版本 120.0.6099.217&…

在 The Sandbox 体验韩剧《碰撞搜查线》的刺激!

风靡全球的韩国电视剧《碰撞搜查线》现已登陆 The Sandbox 元宇宙&#xff01; ASTORY 的电视剧《碰撞搜查线》以充满动作喜剧色彩的方式&#xff0c;讲述了一个交通犯罪调查小组打击公路上的恶棍的故事。该剧迅速成为 Disney 最受欢迎的节目之一&#xff01; 在 The Sandbox体…

「动态规划」如何求最长递增子序列的长度?

300. 最长递增子序列https://leetcode.cn/problems/longest-increasing-subsequence/description/ 给你一个整数数组nums&#xff0c;找到其中最长严格递增子序列的长度。子序列是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其…

CAN通讯相关知识拆解报文格式过滤器数据交互

在嵌入式系统中使用CAN&#xff08;Controller Area Network&#xff09;通讯&#xff0c;需要掌握以下内容&#xff1a; CAN协议&#xff1a;了解CAN总线通讯的基本原理&#xff0c;包括帧格式、报文结构、消息ID等内容。CAN控制器&#xff1a;理解CAN控制器的工作原理以及如…