文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

uniapp实现下拉刷新及上拉(分页)加载更多(app,H5,小程序均可使用)

2023-08-18 08:19

关注

  开门见山地说,在移动端开发中,80%的项目都会涉及到列表展示,而有了列表不可避免的需求就是列表的下拉刷新和上拉加载更多。本篇文章主要介绍在使用uniapp开发移动端的过程中,比较好用的一个下拉及上拉组件,节约大家选择组件的时间,其完美适配uniapp,并可以实现一套代码打包成app,H5及小程序使用。文章最后的链接是完整的一个demo代码。
  本文介绍的这个组件名字叫——mescroll,在他官网中有一句他的主要介绍 – 精致的下拉刷新和上拉加载js框架。虽然主打是js框架,但他同时也支持uniapp适配,并且效果不错,本文主要介绍其在uniapp方面的使用。当然介绍再多也不如各位开发者亲自去了解其框架,以下是官网地址:mescroll官网,本文主要介绍快速上手开发。
  官网的介绍中有些许麻烦,但是毕竟是官方介绍肯定是比较详细的。我们实际使用的时候第一步需要在插件市场下载一下mescroll,然后导入使用,成功后会在components文件夹下看到一个名为mescroll-uni的文件夹。

在这里插入图片描述


  然后我们全局引入一下,在main.js文件中添加如下代码

在这里插入图片描述


  我们再在具体实现界面混入一下

在这里插入图片描述


  引入成功后,我们就可以在界面中使用我们的组件了。

在这里插入图片描述


  一些简单配置:

在这里插入图片描述


  这样就可以实现一个简单的下拉刷新和上拉加载更多,当然这个组件有更多的方法及支持更多的拓展功能,在此就不一一介绍了,主要是分享一个基础的入门方法给大家。以下是效果图。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


  PS:这个组件目前知道有个小坑,其每个页面只能使用一个子组件,所以遇到一个界面有多个tabs的情况,需要大家另外写代码去进行逻辑处理。
  最后,后面链接是示例demo的完整的代码demo下载,下载后即可导入HBuilder直接运行使用。希望本文能帮到大家,谢谢!

来源地址:https://blog.csdn.net/weixin_38611617/article/details/127855341

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯