小程序：分页

自己的笔记分享：小程序分页，具体如下。

","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 文件

javascript 复制代码

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 <>
                        <View
                            className={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 文件

javascript 复制代码

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) return
        this.page.pageNum++
        this.initWallet()
    }

    
}
export default new Store()