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

devtools/2024/10/20 18:54:53/

通过在父页面中使用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.ppmy.cn/devtools/10257.html

相关文章

⽂件权限管理(下)

五、权限掩码 umask ⽤户掩码 控制⽤户创建⽂件和⽬录的默认权限 root⽤户默认权限 ⽬录777 ⽂件666 查看umask [rootqfedu.com ~]#umask 0022 root账户默认 0002 普通⽤户默认 修改umask [rootqfedu.com ~]#umask 0111计算⽅法&#xff1a;先把掩码做取反操作&#xff0c;然后…

【前后端】django前后端交互

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、django是什么二、django前后端交互指引三、总结 前言 随着开发语言及人工智能工具的普及&#xff0c;使得越来越多的人会主动学习使用一些开发语言&#x…

Linux及tmux、vim常用命令

Linux 关于Linux的简介、诞生、迭代&#xff0c;大家可以去网上查一查&#xff0c;这里不多做赘述了 Linux文件类型 非常重要的文件类型有: 普通文件&#xff0c;目录文件&#xff0c;链接文件&#xff0c;设备文件&#xff0c;管道文件&#xff0c;Socket 套接字文件 等。 …

Acer宏碁掠夺者战斧300笔记本电脑PH315-52工厂模式原装Win10系统安装包 恢复出厂开箱状态 带恢复重置

宏碁掠夺者PH315-52原厂Windows10工厂包镜像下载&#xff0c;预装oem系统 链接&#xff1a;https://pan.baidu.com/s/1grmJzz6nW1GOaImY_ymXGw?pwdi286 提取码&#xff1a;i286 原厂W10系统自带所有驱动、PredatorSense风扇键盘控制中心、Office办公软件、出厂主题壁纸、系统…

《SQLite系列》SQLite数据库常用命令大全

SQLite是一个轻量级的数据库系统&#xff0c;广泛应用于嵌入式系统和移动应用中。由于其简洁、快速和高效的特点&#xff0c;SQLite成为了许多开发者的首选数据库。本文将详细介绍SQLite数据库的常用命令&#xff0c;帮助读者更好地掌握和使用SQLite。 一、SQLite命令行工具 …

Unity 线程相关知识

线程 线程介绍 通过线程执行函数和直接在主函数中调用函数的区别是&#xff1a;通过直接调用函数时会按照语句顺序逐句执行&#xff0c;必定会完成上一句后再执行下一句&#xff0c;而通过线程执行的函数会从调用开始与主函数同步执行 调用线程的方式 调用无参数函数线程的…

密码学系列0-总述

通过这一系列文章&#xff0c;帮助读者能快速入门密码学安全性证明。 这一系列文章主要包括以下内容&#xff1a; 1.可证明安全的概念 2.密码学常用困难性问题&#xff1a;CDH,DDH,DLP,BDH等。然后讨论问非对称&#xff0c;对称双线性配对上困难性问题。讨论为什么对称双线性DD…

vue整合Echarts

首先打开网址https://echarts.apache.org/examples/zh/index.html 进入Echars官网找到自己想要的图形我这里选择的是柱形图 点开完整代码直接cv大法 下载Echars的npm npm install echarts 在vue里面挂在个div 导入相关包 写个方法 就是cv过来的 然后改成后端传过来的值…