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

本文主要是介绍微信小程序如何在组件中实现上拉加载下一页和下拉触底，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

通过在父页面中使用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')},
})