个人技术总结——uni-app下拉刷新

222100104林辰恬 2024-06-03 17:13:29

这个作业属于哪个课程	2023软件工程
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	对个人技术的总结
其他参考文献	....

一、技术概述

在uni-app中，上拉刷新是通过监听用户下拉操作来触发页面数据重新加载的技术。
二、技术详述
uni-app微信小程序的上拉加载技术允许用户在滚动到页面底部时自动加载更多内容，常用于分页加载数据。
在数据动态变化频繁的页面中，此功能特别实用。
技术难点在于处理加载状态、分页逻辑和错误处理。
1. 初始化状态和数据
使用reactive和toRefs来定义和解构响应式数据。
loading表示加载状态
page_n表示当前页码
初始状态下，loading被设置为false，表示没有数据加载；page_n被设置为0，表示从第一页开始加载。
2. 监听上拉事件
导入onReachBottom函数，该函数是uni-app提供的页面生命周期函数之一，专门用于监听页面滚动到底部的事件。
在onReachBottom函数中，定义了加载数据的逻辑。
3.加载数据逻辑
当页面滚动到底部时，onReachBottom函数被触发。
将loading.value设置为true，以显示加载中的状态，展示加载动画。
更新page_n.value的值，使其增加1，以获取下一页的数据。
使用UniCloud数据库的APIdb.collection('goods')进行数据查询。根据当前页码page_n.value计算skip的值，并使用limit限制返回的记录数。
等待数据库查询完成后，将返回的数据与现有的数据result.card进行合并。
数据加载完成后，将loading.value设置为false，以表示加载完成并隐藏加载动画。

// 上拉加载
    import {modify,deci} from '@/Acc-config/answer.js'
    const vip = reactive({existVip:false})
    const {existVip} = toRefs(vip)
    const user = reactive({user_infor:{},exist:false,name:'',image:'',exist1:false,score})
    const {user_infor,exist,name,image,exist1,score} = toRefs(user)
    import {onReachBottom} from '@dcloudio/uni-app'
    let loading = ref(false)
    let page_n = ref(0)
    onReachBottom(async()=>{//onReachBottom只能在父组件才能触底
        loading.value = true
        page_n.value++
        let sk = page_n.value * 10
        const res_goods = await db.collection('goods').where({shelves:true}).limit(10).skip(sk).field({goods_cover:true,goods_price:true,goods_title:true,sold:true,video_url:true}).orderBy('sold','desc').get()
        result.card = [...result.card,...res_goods.data]
        loading.value = false
    })

三、技术使用中遇到的问题和解决过程

3.1 遇到的问题

问题一：在实际运行中上拉加载无法触发
问题二：触发刷新后上拉加载时数据重复加载
3.2 解决过程
解决问题一：
尝试过多种方法后，发现其实直接调整触发阈值，即页面滚动到底部多少距离时触发，就可以使用上加载。后面仔细查看后发现是页面元素没有设置在正确的区域内，被图片元素遮挡了，导致无法刷新。将页面位置设置正确后，也能正常运行。
解决问题二：
通过查询资料，直接使用一个标志位来控制数据加载的状态就可以解决。当数据正在加载时，禁止触发新的加载事件。在触发上拉加载事件时，首先检查loading的状态。如果loading为true，则不执行加载操作；如果loading为false，则执行加载操作。
四、总结
虽然uni-app微信小程序的上拉加载功能在实现上并不复杂，但在实践开发的过程中仍然会遇到各种问题。通过查询资料、请教组员以及分析和调试，找到问题的根源，并采取相应的解决方案来修复这些问题。

...全文