自己的笔记分享：小程序分页，具体如下。
","marks":[]}]}]},{"type":"block","id":"46HQ-1677675582876","name":"code-line","data":{},"nodes":[{"type":"text","id":"vNO7-1677675582874","leaves":[{"text":" ","marks":[]}]}]},{"type":"block","id":"nNuS-1677675586054","name":"code-line","data":{},"nodes":[{"type":"text","id":"LlLu-1677675586053","leaves":[{"text":" {","marks":[]}]}]},{"type":"block","id":"4Ovr-1677675586056","name":"code-line","data":{},"nodes":[{"type":"text","id":"fwTp-1677675586055","leaves":[{"text":" store.list?.length > 0 && store.list.map((item: any) => {","marks":[]}]}]},{"type":"block","id":"qWvY-1677675586058","name":"code-line","data":{},"nodes":[{"type":"text","id":"RIbB-1677675586057","leaves":[{"text":" return <>","marks":[]}]}]},{"type":"block","id":"GsGx-1677675664820","name":"code-line","data":{},"nodes":[{"type":"text","id":"mZT6-1677675664819","leaves":[{"text":" ","marks":[]}]}]},{"type":"block","id":"POG2-1677675664837","name":"code-line","data":{},"nodes":[{"type":"text","id":"lhsd-1677675664836","leaves":[{"text":" item.statementType","marks":[]}]}]},{"type":"block","id":"AdnR-1677675664839","name":"code-line","data":{},"nodes":[{"type":"text","id":"Apj1-1677675664838","leaves":[{"text":" ","marks":[]}]}]},{"type":"block","id":"ay5I-1677675586131","name":"code-line","data":{},"nodes":[{"type":"text","id":"Vl7H-1677675586130","leaves":[{"text":" ","marks":[]}]}]},{"type":"block","id":"hQxN-1677675586133","name":"code-line","data":{},"nodes":[{"type":"text","id":"C0Ew-1677675586132","leaves":[{"text":" })","marks":[]}]}]},{"type":"block","id":"Bndb-1677675586135","name":"code-line","data":{},"nodes":[{"type":"text","id":"t2Sa-1677675586134","leaves":[{"text":" }","marks":[]}]}]},{"type":"block","id":"H9MG-1677675586150","name":"code-line","data":{},"nodes":[{"type":"text","id":"lMFK-1677675586148","leaves":[{"text":" ","marks":[]}]}]},{"type":"block","id":"qDcK-1677675583359","name":"code-line","data":{},"nodes":[{"type":"text","id":"LnBj-1677675583358","leaves":[{"text":" ","marks":[]}]}]},{"type":"block","id":"ruEw-1677675552739","name":"code-line","data":{},"nodes":[{"type":"text","id":"EmRC-1677675552738","leaves":[{"text":"}","marks":[]}]}]},{"type":"block","id":"nsGG-1677675553819","name":"code-line","data":{},"nodes":[{"type":"text","id":"nUe3-1677675553817","leaves":[{"text":"export default observer(Index())","marks":[]}]}]}],"state":{}},{"type":"block","id":"FHYy-1677675818487","name":"paragraph","data":{},"nodes":[{"type":"text","id":"XfZy-1677675818488","leaves":[{"text":"2、store.js 文件","marks":[]}]}],"state":{}},{"type":"block","id":"B0GJ-1677675818486","name":"code","data":{"wrap":false,"language":"javascript","theme":"default"},"nodes":[{"type":"block","id":"I2NN-1677675818484","name":"code-line","data":{},"nodes":[{"type":"text","id":"T7Ch-1677675035682","leaves":[{"text":"import { action, observable, runInAction } from \"mobx\";","marks":[]}]}]},{"type":"block","id":"BLOC-1677676030367","name":"code-line","data":{},"nodes":[{"type":"text","id":"clu5-1677676030366","leaves":[{"text":"import ajax from \"@/utils/ajax\";","marks":[]}]}]},{"type":"block","id":"BKQq-1677676020274","name":"code-line","data":{},"nodes":[{"type":"text","id":"zESk-1677676020273","leaves":[{"text":"","marks":[]}]}]},{"type":"block","id":"C1pE-1677676020428","name":"code-line","data":{},"nodes":[{"type":"text","id":"KBLU-1677676020426","leaves":[{"text":"class Store {","marks":[]}]}]},{"type":"block","id":"niEv-1677675896024","name":"code-line","data":{},"nodes":[{"type":"text","id":"OXoi-1677675896022","leaves":[{"text":" // 分页","marks":[]}]}]},{"type":"block","id":"8X6E-1677675913746","name":"code-line","data":{},"nodes":[{"type":"text","id":"vhyG-1677675913745","leaves":[{"text":" @observable page = {","marks":[]}]}]},{"type":"block","id":"mAI5-1677675913748","name":"code-line","data":{},"nodes":[{"type":"text","id":"gXhd-1677675913747","leaves":[{"text":" pageNum: 1,","marks":[]}]}]},{"type":"block","id":"Nu7C-1677675913750","name":"code-line","data":{},"nodes":[{"type":"text","id":"a2Y8-1677675913749","leaves":[{"text":" pageSize: 10","marks":[]}]}]},{"type":"block","id":"4S5J-1677675913752","name":"code-line","data":{},"nodes":[{"type":"text","id":"TgCA-1677675913751","leaves":[{"text":" }","marks":[]}]}]},{"type":"block","id":"3GFh-1677675913754","name":"code-line","data":{},"nodes":[{"type":"text","id":"z5sL-1677675913753","leaves":[{"text":" @observable hasMore = true;","marks":[]}]}]},{"type":"block","id":"wWZk-1677675913756","name":"code-line","data":{},"nodes":[{"type":"text","id":"k0vL-1677675913755","leaves":[{"text":" @observable total = 0","marks":[]}]}]},{"type":"block","id":"nc8L-1677675911699","name":"code-line","data":{},"nodes":[{"type":"text","id":"3sFw-1677675911697","leaves":[{"text":" ","marks":[]}]}]},{"type":"block","id":"Fv3J-1677675911824","name":"code-line","data":{},"nodes":[{"type":"text","id":"MBi0-1677675911822","leaves":[{"text":" // 初始化","marks":[]}]}]},{"type":"block","id":"87vP-1677675865899","name":"code-line","data":{},"nodes":[{"type":"text","id":"mhtG-1677675865897","leaves":[{"text":" @action init() => {","marks":[]}]}]},{"type":"block","id":"L5jO-1677675894117","name":"code-line","data":{},"nodes":[{"type":"text","id":"fBie-1677675894116","leaves":[{"text":" ajax.get(\"\").then((res) => {","marks":[]}]}]},{"type":"block","id":"mpGv-1677675952070","name":"code-line","data":{},"nodes":[{"type":"text","id":"KEpe-1677675952069","leaves":[{"text":" runInAction(() => {","marks":[]}]}]},{"type":"block","id":"9Mca-1677675970587","name":"code-line","data":{},"nodes":[{"type":"text","id":"SI7p-1677675970586","leaves":[{"text":" // 分页处理","marks":[]}]}]},{"type":"block","id":"Y8MQ-1677675966989","name":"code-line","data":{},"nodes":[{"type":"text","id":"XRSJ-1677675966988","leaves":[{"text":" if (res.data.page.total {","marks":[]}]}]},{"type":"block","id":"okbf-1677676005036","name":"code-line","data":{},"nodes":
一、需求
小程序下滑刷新
二、代码
1、html 文件
import Taro, { useDidShow } from '@tarojs/taro';
import { View, ScrollView } from '@tarojs/components';
import { observer } from "mobx-react";
import classnames from 'classnames';
import styles from './index.module.scss';
import store from "./store";function Index() {useDidShow({store.init() })return <><ScrollView scrollY onScrollToLower={store.scrollToLower}>{store.list?.length > 0 && store.list.map((item: any) => {return <><ViewclassName={classnames({[styles["kind"]]: true,[styles["red"]]: item.statementType === '1',[styles["green"]]: item.statementType === '2',[styles["orange"]]: item.statementType === '3',})}>item.statementType</View></>})}</ScrollView></>
}
export default observer(Index())2、store.js 文件
import { action, observable, runInAction } from "mobx";
import ajax from "@/utils/ajax";class Store {// 分页@observable page = {pageNum: 1,pageSize: 10}@observable hasMore = true;@observable total = 0// 初始化@action init() => {ajax.get("").then((res) => {runInAction(() => {// 分页处理if (res.data.page.total <= res.data.page.pageNum * this.page.pageSize) {this.hasMore = false}if (this.page.pageNum === 1) {this.list = res?.data?.data || [];} else {this.list = [...this.list, ...res?.data?.data]}})})}// 滑动分页事件@action scrollToLower = () => {if (!this.hasMore) returnthis.page.pageNum++this.initWallet()}}
export default new Store()
...)
