微信小程序 如何在组件中实现 上拉加载下一页和下拉触底

通过在父页面中使用selectComponent来调用子组件的方法来实现

1、在component中配置好方法

子页面homePage/index/index.js
// homePage/index/index.js
var total = 0
var pageNo = 1
const pageSize = 20
Component({/*** 组件的属性列表*/properties: {},lifetimes: {created: function () {},attached: function () {setTimeout(() => {this.getProfessorQuestionList('fresh')}, 0)},},/*** 组件的初始数据*/data: {questionList:[]},/*** 组件的方法列表*/methods: {loadData(action) {if (action == 'fresh') {pageNo = 1}if (action == 'more') {if (pageNo * pageSize < total) {pageNo++this.getProfessorQuestionList('more')}} else {this.getProfessorQuestionList('fresh')}},getProfessorQuestionList(type) {wx.showLoading({title: '加载中',mask: true})httpUtils.post({url: url,data: {page: pageNo,pageSize: pageSize,}}).then(res => {wx.hideLoading()total = res.page.total;let questionList = stringUtils.isNull(res.list) ? [] : res.list;if (type == 'fresh') {this.setData({questionList: questionList})} else {this.setData({questionList: this.data.questionList.concat(questionList)})}}).finally(() => {wx.hideLoading()this.setData({noData:this.data.questionList.length? true:false})})},}
})

2、在父页面使用selectComponent来调用子组件的方法

父页面page/index/index.json
{"usingComponents": {"homePage": "../../homePage/index/index",},"navigationStyle": "custom"
}
父页面page/index/index.wxml
 <homePage id="homePage" />
父页面page/index/index.js
Page({data: {homePage: ''},onReady() {this.setData({homePage: this.selectComponent("#homePage"),})},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {this.data.homePage.loadData('fresh')},/*** 页面上拉触底事件的处理函数*/onReachBottom() {this.data.homePage.loadData('more')},
})

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

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

相关文章

【题解】AB5 点击消除(栈)

https://www.nowcoder.com/practice/8d3643ec29654cf8908b5cf3a0479fd5?tpId308&tqId40462&ru/exam/oj 把string当栈用&#xff0c;扫一遍就可以了&#xff0c;时间复杂度O(n) #include <iostream> #include <string> using namespace std;int main() {…

深度学习基础之《TensorFlow框架(13)—二进制数据》

一、CIFAR10二进制数据集介绍 1、CIFAR-10数据集 CIFAR-10数据集由10个类别的60000个32x32彩色图像组成&#xff0c;每个类别有6000个图像。有50000个训练图像和10000个测试图像 2、数据集分为五个训练批次和一个测试批次&#xff0c;每个批次有10000个图像 3、data_batch_1…

向量的点积和叉积的几何意义

1. 点积 点积(dot product)&#xff0c;又称标量积&#xff08;scalar product&#xff09;。结果等于。 可用于 判断的是否垂直求投影长度求向量是抑制作用还是促进作用 2. 叉积 叉积(cross product)&#xff0c;又称为向量积(vector product)。模长等于&#xff0c;方向…

Golang | Leetcode Golang题解之第43题字符串相乘

题目&#xff1a; 题解&#xff1a; func multiply(num1 string, num2 string) string {if num1 "0" || num2 "0" {return "0"}m, n : len(num1), len(num2)ansArr : make([]int, m n)for i : m - 1; i > 0; i-- {x : int(num1[i]) - 0fo…

详细说说,中介怎么做!CLHLS数据库探索抑郁症状的中介作用发文二区

零基础CHARLS发论文&#xff0c;不容错过&#xff01; 长期回放更新指导&#xff01;适合零基础&#xff0c;毕业论文&#xff0c;赠送2011-2020年CHARLS清洗后的数据全套代码&#xff01; 2024年3月28日&#xff0c;中国学者用CLHLS数据库最新数据&#xff08;2018年&#xff…

java-Arrays

一、Arrays的概述 Arrays是操作数组的工具类 二、Arrays的常用方法 Arrays的常用方法基本上都被static静态修饰&#xff0c;因此在使用这些方法时&#xff0c;可以直接通过类名调用 1.toString 语法&#xff1a;Arrays.toString(数组) 用于将数组的元素转换为一个字符串&a…

代码随想录:链表

移出链表元素 lc203.移除链表元素 题目lc203思路&#xff1a;注意这里的头节点也有val&#xff0c;所以分两种情况&#xff0c;头节点和非头结点代码如下&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* …

蓝桥杯第17169题——兽之泪II

问题描述 在蓝桥王国&#xff0c;流传着一个古老的传说&#xff1a;在怪兽谷&#xff0c;有一笔由神圣骑士留下的宝藏。 小蓝是一位年轻而勇敢的冒险家&#xff0c;他决定去寻找宝藏。根据远古卷轴的提示&#xff0c;如果要找到宝藏&#xff0c;那么需要集齐 n 滴兽之泪&#…

go | 切片的长度和容量

其实这也不算什么重难点了&#xff0c;只是想想&#xff0c;也就记录下来吧。对了&#xff0c;有一段时间没在这上面更了然后那个排名就有点在掉&#xff0c;感觉这个机制不太好&#xff0c;更过于频繁很可能只是写流水账&#xff0c;内容质量会大打折扣 好的&#xff0c;我们步…

Git | 分支管理

Git | 分支管理 文章目录 Git | 分支管理1、理解分支2、创建分支&&切换分支3、合并分支4、删除分支5、合并冲突6、分支管理策略合并分支模式实际工作中分支策略bug分支删除临时分支 1、理解分支 分支就类似分身。 在版本回退中&#xff0c;每次提交Git都会将修改以git…

asio之地址

address address作为address_v4和address_v6的包装器 #mermaid-svg-XZWMK64K5NucyHdI {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-XZWMK64K5NucyHdI .error-icon{fill:#552222;}#mermaid-svg-XZWMK64K5NucyHdI …

简单学量化——pandas的应用26——sort_values函数5

简单学量化——pandas的应用26——sort_values函数5 sort_values是pandas中的排序函数&#xff0c;语法如下&#xff1a; DataFrame.sort_values(by,axis0,ascendingTrue,inplaceFalse,kindquicksort,na_positionlast, ignore_indexFalse,keyNone) 前面我们学习了by、axis、a…

C++之写时复制(CopyOnWrite)

设计模式专栏&#xff1a;http://t.csdnimg.cn/4j9Cq 目录 1.简介 2.实现原理 3.QString的实现分析 3.1.内部结构 3.2.写入时复制 4.示例分析 5.使用场景 6.总结 1.简介 CopyOnWrite (COW) 是一种编程思想&#xff0c;用于优化内存使用和提高性能。COW 的基本思想是&am…

go的编译以及运行时环境

开篇 很多语言都有自己的运行时环境&#xff0c;go自然也不例外&#xff0c;那么今天我们就来讲讲go语言的运行时环境&#xff01; 不同语言的运行时环境对比 我们都知道Java的运行时环境是jvm &#xff0c;javascript的运行时环境是浏览器内核 Java -->jvm javascript…

postgresql 存储过程 批量插入(根据插入的值 动态判断需要插入的字段) 以及 批量更改(根据更改的值 动态判断需要更改的字段)

postgresql 存储过程 循环插入 根据插入的值判断插入相应的字段 在PostgreSQL中&#xff0c;您可以使用PL/pgSQL语言编写函数&#xff0c;该函数可以在循环中执行插入操作&#xff0c;并根据插入的值判断应该插入哪些字段。但是&#xff0c;请注意&#xff0c;PostgreSQL通常不…

FastWiki一分钟本地离线部署本地企业级人工智能客服

介绍 FastWiki是一个开源的企业级人工智能客服系统&#xff0c;它使用了一系列先进的技术和框架来支持其功能。 技术栈 前端框架&#xff1a;React LobeUI TypeScript后端框架&#xff1a;MasaFramework 基于 .NET 8动态函数&#xff1a;基于JavaScript V8引擎实现向量搜索…

物联网配网工具多元化助力腾飞——智能连接,畅享未来

随着物联网技术的迅猛发展&#xff0c;智能插座、蓝牙网关作为其中常见的智能物联设备&#xff0c;无论是功能还是外观都有很大的改进&#xff0c;在智能化越来越普遍的情况下&#xff0c;它们的应用场景也在不断拓宽。对于智能设备而言&#xff0c;配网方式的选择对于设备的成…

Jenkins CI/CD 持续集成专题一 Jenkins的安装和配置

一 jenkins 官方教程 安装Jenkins 二 安装 2.1 安装方式一 通过安装包的package方式安装 第一步下载链接&#xff1a; Download the latest package 第二步操作方式&#xff1a;打开包并按照说明操作即可安装 2.2 安装方式二 brew安装 第一 安装最新版本jenkins brew in…

【Java框架】SpringMVC(二)——SpringMVC数据交互

目录 前后端数据交互RequestMapping注解基于RequestMapping注解设置接口的请求方式RequestMapping注解的常用属性一个方法配置多个接口method属性params属性headers属性consumes属性produces属性 SpringMVC中的参数传递默认单个简单参数默认多个简单参数默认参数中有基本数据类…

掌控基础设施,加速 DevOps 之旅:IaC 深度解析

在当今的 DevOps 世界中&#xff0c;基础设施即代码&#xff08;IaC&#xff09;是一个非常重要的概念。它在整个行业几乎无处不在&#xff0c;是现代工程角色的绝对关键。 本文将主要包含 IaC 的定义和它的好处&#xff0c;同时将 Walrus 作为最佳实践来进行详细讲解。 什么是…