小程序:分页

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

","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()
相关推荐
Rockson几秒前
使用Ruby接入实时行情API教程
javascript·python
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
gnip3 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员3 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘4 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
你这个年龄怎么睡得着的4 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
南屿im4 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Python私教4 小时前
FastAPI+React19 ERP系统实战 第01期
react·fastapi