微信小程序 - scroll-view组件之上拉加载下拉刷新(解决上拉加载不触发)

前言

最近在做微信小程序项目中,有一个功能就是做一个商品列表分页限流然后实现上拉加载下拉刷新功能,遇到了一个使用scroll-viwe组件下拉刷新事件始终不触发问题,网上很多说给scroll-view设置一个高度啥的就可以解决,有些人设置了高度也不触发,所以在下就研究了一波这个scroll-view的触发机制。

一、scroll-view

可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

两个属性是作为上拉加载下拉刷新触发事件
scroll-view属性bindrefresherrefresh:自定义下拉刷新被触发

scroll-view属性bindscrolltolower:滚动到底部/右边时触发

官网文档:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

二、上拉加载下拉刷新

提示:以下是本篇文章正文内容,下面案例可供参考

1. wxml代码

<scroll-view id="scrollView"  scroll-y="true" style="height: {{windowHeight}}px;"refresher-enabled="{{true}}" refresher-threshold="{{100}}"refresher-default-style="white"refresher-background="rgb(211, 234, 248)"refresher-triggered="{{triggered}}"bindrefresherrefresh="onRefresh"  bindscrolltolower="loadMore"><view class="fruit-list" wx:for="{{fruits}}" wx:key="id"><view class="fruit-item"><image src="{{requestUrl}}{{item.imageUrl}}"></image><view class="mid"><text style="font-weight: bold;">{{item.name}}</text><text style="color: rgb(146, 146, 146);">库存{{item.stock}}</text><text style="font-weight: bold;">¥{{item.price}}</text></view><button>选择</button></view></view>
</scroll-view>

2. wxcc代码

.fruit-item {display: flex;justify-content: center;align-items: center;
}.fruit-item view {display: flex;flex-direction: column;font-size: 9px;flex: 2;align-items: flex-start;justify-content: center;line-height: 30px;
}.fruit-item image {height: 100px;width: 100px;border-radius: 5px;margin:10px;flex: 3;
}
.fruit-item button {background-color: rgb(219, 207, 137);width: 40px; height: 20px;font-size: 8px;flex: 1;line-height: 5px;
}.mid :first-child{width: 70px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

3. 下拉刷新bindrefresherrefresh : onRefresh下拉刷新事件定义

 onRefresh() {// 自己定义刷新事件var self = this;// 自己定义刷新事件self.setData({triggered: true, // 将triggered属性设置为true,表示下拉刷新已经被触发})wx.showToast({title: "刷新成功"})setTimeout(function () {self.setData({triggered: false, // 将triggered属性设置为false,表示下拉刷新已完成})console.log('下拉刷新已完成');}, 3000);}

4. 上拉加载

scroll-view触发的条件

在这里插入图片描述

触底事件不触发有以下情况:

  1. scroll-view没有设置高度或者高度设置太高导致 item总高度 < scroll-view高度下拉过程中触不到底
  2. scroll-view容器中的item没有设置高度导致 item总高度<scollview高度

注意:如果scroll-view高度 < item总高度且值小于1~4px也是不触发的要大于5px这样才会触发,
例如:scroll-view高度为480px,item总高度为480-484px不会触发

解决方案

  1. scroll-view设置高度100vh;
  2. item设置一个适合的高度

100vh

是一个在网页开发中常用的单位,表示相对于视窗(viewport)高度的百分比。具体来说,它等于视窗高度的百分之一百。在大多数情况下,该单位用于设置元素的高度或最小高度,以便使其充满整个视窗高度。
例如,如果视窗高度为600像素,那么使用"100vh"将会等于600像素。这样,你可以通过将元素的高度设置为"100vh",使其完全填充整个视窗高度。这在创建全屏幻灯片、背景图像或需要完全占据视窗的元素时非常有用。

下拉刷新bindrefresherrefresh : onRefresh下拉刷新事件定义

// 下拉刷新onRefresh() {var self = this;this.setData({triggered: true, // 将triggered属性设置为true,表示下拉刷新已经被触发})this.requestFruitList(this.data.flag, 1, function (data) {// 处理响应数据,并将新的数据覆盖原有数据this.setData({fruits: data.fruits,allPage: data.totalPages,curPage: 1,triggered: false, // 将triggered属性设置为false,表示下拉刷新已完成})wx.showToast({title: "刷新成功"})}.bind(this), function (err) {// 处理请求失败情况console.error(err);wx.showToast({title: "刷新失败,请重试"})}.bind(this));}

源码:

const app = getApp()Page({data: {requestUrl: app.globalData.baseUrl,types: [{id: 1,title: "鲜果现切"}, {id: 2,title: "国产零食"}, {id: 3,title: "特产零食"},{id: 4,title: "肉类蛋食"}, {id: 5,title: "特色小吃"}, {id: 6,title: "牛奶乳品"},{id: 7,title: "水果捞吧"}, {id: 8,title: "当即热销"}, {id: 9,title: "蔬菜鲜卖"}],fruits: [{id: 1,name: "哈密瓜",price: 29,stock: 100,imageUrl: "/images/ls.jpg"}, {id: 2,name: "哈密瓜",price: 29,stock: 100,imageUrl: "/images/ls.jpg"},{id: 3,name: "哈密瓜",price: 29,stock: 100,imageUrl: "/images/ls.jpg"}, {id: 4,name: "哈密瓜",price: 29,stock: 100,imageUrl: "/images/ls.jpg"}],flag: 1,triggered: false, // 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发allPage: 1, // 总页数curPage: 1, // 当前页数windowHeight: null},// 上拉到底部触发loadMore: function () {console.log("加载更多");var self = this;// 为最后一页if (self.data.curPage == self.data.allPage) {wx.showToast({title: '没有更多了',})} else {setTimeout(function () {console.log("加载更多");var tempCurPage = self.data.curPage;tempCurPage++;self.setData({curPage: tempCurPage})self.requestFruitList(self.data.flag, self.data.curPage, function (data) {// 处理响应数据,并将新的数据添加到原有数据之后var newFruits = self.data.fruits.concat(data.fruits);self.setData({fruits: newFruits,allPage: data.totalPages});}, function (err) {// 处理请求失败情况console.error(err);});}, 300)}},// 下拉刷新onRefresh() {var self = this;this.setData({triggered: true, // 将triggered属性设置为true,表示下拉刷新已经被触发})this.requestFruitList(this.data.flag, 1, function (data) {// 处理响应数据,并将新的数据覆盖原有数据this.setData({fruits: data.fruits,allPage: data.totalPages,curPage: 1,triggered: false, // 将triggered属性设置为false,表示下拉刷新已完成})wx.showToast({title: "刷新成功"})}.bind(this), function (err) {// 处理请求失败情况console.error(err);wx.showToast({title: "刷新失败,请重试"})}.bind(this));},switchNav: function (e) {var page = this;var id = e.target.id;if (this.data.currentTab == id) {return false;} else {page.setData({currentTab: id});}page.setData({flag: id,curPage: 1});this.requestFruitList(id, page.data.curPage, function (data) {// 处理响应数据page.setData({fruits: data.fruits,allPage: data.totalPages});}, function (err) {// 处理请求失败情况console.error(err);});},requestFruitList: function (typeId, curPage, successCallback, failCallback) {wx.request({url: this.data.requestUrl + '/fruit?typeId=' + typeId + '&pageNum=' + curPage,method: 'GET',success(res) {console.log(res.data);// 调用成功回调函数,并将响应数据作为参数传递successCallback(res.data);},fail(err) {console.error(err);// 调用失败回调函数,并将错误信息作为参数传递failCallback(err);}})},onLoad: function (options) {var id = options.id; // 获取传递的参数console.log('接收到的id参数为:' + id);var page = this;page.setData({flag: id})this.requestFruitList(id, page.data.curPage, function (data) {// 处理响应数据page.setData({fruits: data.fruits,allPage: data.totalPages});}, function (err) {// 处理请求失败情况console.error(err);});// 获取屏幕高度wx.getSystemInfo({success: function (res) {page.setData({windowHeight: res.windowHeight})console.log('屏幕高度:', res.windowHeight);}})}
})

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

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

相关文章

React Native从文本内容尾部截取显示省略号

<Textstyle{styles.mMeNickname}ellipsizeMode"tail"numberOfLines{1}>{userInfo.nickname}</Text> 参考链接&#xff1a; https://www.reactnative.cn/docs/text#ellipsizemode https://chat.xutongbao.top/

计算机视觉实验:人脸识别系统设计

实验内容 设计计算机视觉目标识别系统&#xff0c;与实际应用有关&#xff08;建议&#xff1a;最终展示形式为带界面可运行的系统&#xff09;&#xff0c;以下内容选择其中一个做。 1. 人脸识别系统设计 (1) 人脸识别系统设计&#xff08;必做&#xff09;&#xff1a;根据…

OC与Swift的相互调用

OC调用Swift方法 1、在 Build Settings 搜索 Packaging &#xff0c;设置 Defines Module 为 YES 2、新建 LottieBridge.swift 文件&#xff0c;自动生成桥 ProductName-Bridging-Header.h 3、在 LottieBridge.swift 中&#xff0c;定义Swift类继承于OC类&#xff0c;声明 obj…

《Kali渗透基础》12. 无线渗透(二)

kali渗透 1&#xff1a;无线协议栈1.1&#xff1a;ifconfig1.2&#xff1a;iwconfig1.3&#xff1a;iw1.4&#xff1a;iwlist 2&#xff1a;无线网卡配置2.1&#xff1a;查看无线网卡2.2&#xff1a;查看信道频率2.3&#xff1a;扫描附近 AP2.4&#xff1a;侦听接口添加与删除 …

超低功耗LCD段码屏驱动显示芯片VK1621原厂芯片

型 号&#xff1a;VK1621 / 品 牌&#xff1a;VINKA/永嘉微电 最新年份 VK1621 是一个324的LCD驱动器&#xff0c;可软体程式控制使其适用于多样化的LCD应用线路&#xff0c;仅用到3至4条信号线便可控制LCD驱动器&#xff0c;除此之外也可介由指令使其進入省电模式 M1855 …

uniapp封装request请求

在基础文件里面创建一个api文件 在创建两个 js文件 http.js 里面封装 request 请求 let baseUrl https://white.51.toponet.cn; //基地址 export const request (options {}) > {//异步封装接口&#xff0c;使用Promise处理异步请求return new Promise((resolve, reject…

如何测出 Scratch 的指令反应时间

相信看了标题&#xff0c;你一定会很吃惊&#xff0c;你会觉得scratch不是没有反应时间吗&#xff1f; 但其实不是&#xff0c;这也是我偶然间发现的&#xff0c;这期的内容较少&#xff0c;对你的技术涨幅很小&#xff0c;但可以当作娱乐来看 其实就7个代码&#xff0c;但看着…

Nginx实现反向代理和负载均衡

Nginx安装 本文章主要介绍下&#xff0c;如何使用Nginx来实现反向代理和负载均衡&#xff0c;Nginx安装和基础知识&#xff0c;可参考我的这篇文章 Nginx安装。 Nginx实现反向代理 实现反向代理需要准备两台Nginx服务器。一台Nginx服务器A&#xff0c;ip为 192.168.206.140&…

Debian/Ubuntu 安装 Chrome 和 Chrome Driver 并使用 selenium 自动化测试

截至目前&#xff0c;Chrome 仍是最好用的浏览器&#xff0c;没有之一。Chrome 不仅是日常使用的利器&#xff0c;通过 Chrome Driver 驱动和 selenium 等工具包&#xff0c;在执行自动任务中也是一绝。相信大家对 selenium 在 Windows 的配置使用已经有所了解了&#xff0c;下…

Agents改变游戏规则,亚马逊云科技生成式AI让基础模型加速工作流

最近&#xff0c;Stability AI正式发布了下一代文生图模型——Stable Diffusion XL 1.0这次的1.0版本是Stability AI的旗舰版生图模型&#xff0c;也是最先进的开源生图模型。 在目前的开放式图像模型中&#xff0c;SDXL 1.0是参数数量最多的。官方表示&#xff0c;这次采用的…

【运维】hive 终端突然不能使用:Hive Schema version does not match metastore‘s schema version

文章目录 一. 问题描述二. 常规排查1. 元数据库2. hive-site.xml相关meta连接信息检查 三. 正解 一. 问题描述 进入hive终端&#xff0c;执行如下命令报错&#xff1a; hive> show tables; FAILED: SemanticException org.apache.hadoop.hive.ql.metadata.HiveException: …

基于图片、无人机、摄像头拍摄进行智能检测功能

根据要求进行无人机拍摄的视频或图片进行智能识别&#xff0c;开发过程需要事项 1、根据图片案例进行标记&#xff0c;进行模型训练 2、视频模型训练 开发语言为python 根据需求功能进行测试结果如下 根据车辆识别标记进行的测试结果截图 测经过查看视频 8月1日

小白到运维工程师自学之路 第六十四集 (dockerfile构建tomcat、mysql、lnmp、redis镜像)

一、tomcat&#xff08;更换jdk&#xff09; mkdir tomcat cd tomcat/ tar xf jdk-8u191-linux-x64.tar.gz tar xf apache-tomcat-8.5.40.tar.gzvim Dockerfile FROM centos:7 MAINTAINER Crushlinux <syh163.com> ADD jdk1.8.0_191 /usr/local/java ENV JAVA_HOME /us…

解决多线程环境下单例模式同时访问生成多个实例

如何满足单例&#xff1a;1.构造方法是private、static方法、if语句判断 ①、单线程 Single类 //Single类&#xff0c;定义一个GetInstance操作&#xff0c;允许客户访问它的唯一实例。GetInstance是一个静态方法&#xff0c;主要负责创建自己的唯一实例 public class LazySi…

服务器安装系统教程

虽然装好了显卡&#xff0c;但是机器运行一会&#xff0c;CPU就飙升到100%。找售后解决&#xff0c;也没有完全解决。所以这次试试换个别的系统是否能修复。 本来计划是后面组raid、重装系统的&#xff0c;得&#xff0c;又提前了。 这里说一下&#xff0c;这个流程未必是最好…

ChatGPT在工作中的七种用途

1. 用 ChatGPT 替代谷歌搜索引擎 工作时&#xff0c;你一天会访问几次搜索引擎&#xff1f;有了 ChatGPT&#xff0c;使用搜索引擎的频率可能大大下降。 据报道&#xff0c;谷歌这样的搜索引擎巨头&#xff0c;实际上很担心用户最终会把自己的搜索工具换成 ChatGPT。该公司针对…

【FAQ】RTSP/Onvif协议安防监控EasyNVR调用接口录像会被自动删除是什么原因?

EasyNVR安防视频云服务是基于RTSP/Onvif协议接入的视频平台&#xff0c;可支持将接入的视频流进行全平台、全终端的分发&#xff0c;分发的视频流包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等。平台丰富灵活的视频能力&#xff0c;可应用在智慧校园、智慧工厂、智慧水利等…

Docker Compose编排部署LNMP服务

目录 安装docker-ce 阿里云镜像加速器 文件 启动 安装docker-ce [rootlocalhost ~]# wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo --2023-08-03 18:34:32-- http://mirrors.aliyun.com/repo/Centos-7.repo 正在解析主机 m…

Hive数据仓库

数据仓库概念与起源发展由来 数仓概念 数据仓库&#xff08;英语&#xff1a;Data Warehouse&#xff0c;简称数仓、DW&#xff09;&#xff0c;是一个用于存储、分析、报告的数据系统。数据仓库的目的是构建面相分析的集成化数据环境&#xff0c;分析结果为企业提供决策支持…

iTOP-RK3568开发板Windows 安装 RKTool 驱动

在烧写镜像之前首先需要安装 RKTool 驱动。 RKTool 驱动在网盘资料“iTOP-3568 开发板\01_【iTOP-RK3568 开发板】基础资料 \02_iTOP-RK3568 开发板烧写工具及驱动”路径下。 驱动如下图所示&#xff1a; 解压缩后&#xff0c;进入文件夹&#xff0c;如下图所示&#xff1a;…