热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

微信小程序实现滚动加载更多的代码

这篇文章通过实例代码给大家介绍了微信小程序实现滚动加载更多,给大家提供了完整代码,需要的朋友可以参考下

1.需要用到的组件和api

scroll-view(可滚动视图区域)

wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的

2.需要用到的属性

 3.scrol-view需要指定一个高度,这个高度可以按自己的需求计算,我使用的是屏幕可用高度并且默认一页显示6个

4.滚动到底部绑定需要触发的事件

5.操作事件函数,主要是将请求下来的数据用concat方法进行合并,然后赋值,我是用的for循环假装添加的数据,实际项目中可以换成自己的ajax,并且为了模拟加载我添加了一个1.5秒的定时器,先调用提示框api成功之后关闭

lower() {
  var result = this.data.res;
  var resArr = [];
  //这里可以使用自己的ajax
  for (let i = 0; i <10; i++) {
   resArr.push(i);
  };
  var cOnt= result.concat(resArr);//合并请求的数据
  console.log(resArr.length);
  if (cont.length >= 100) {
   wx.showToast({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中” 
    title: '我也是有底线的',
    icon: 'success',
    duration: 300
   });
   return false;
  } else {
   wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中” 
    title: '加载中',
    icon: 'loading',
   });
   setTimeout(() => {
    this.setData({
     res: cont
    });
    wx.hideLoading();
   }, 1500)
  }
 }

  6.成功,放完整代码可以直接复制运行

wxml代码



 {{item}}

 js代码

Page({

 /**
  * 页面的初始数据
  */
 data: {
  height: '',
  res: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 },
 lower() {
  var result = this.data.res;
  var resArr = [];
  for (let i = 0; i <10; i++) {
   resArr.push(i);
  };
  var cOnt= result.concat(resArr);
  console.log(resArr.length);
  if (cont.length >= 100) {
   wx.showToast({ //如果全部加载完成了也弹一个框
    title: '我也是有底线的',
    icon: 'success',
    duration: 300
   });
   return false;
  } else {
   wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中” 
    title: '加载中',
    icon: 'loading',
   });
   setTimeout(() => {
    this.setData({
     res: cont
    });
    wx.hideLoading();
   }, 1500)
  }
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  wx.getSystemInfo({
   success: (res) => {
    this.setData({
     height: res.windowHeight
    })
   }
  })
 }
})

总结

以上所述是小编给大家介绍的微信小程序实现滚动加载更多的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


推荐阅读
  • 微信小程序图片上传功能详解:wx.chooseImage与wx.uploadFile的使用方法与注意事项
    在微信小程序中,图片上传功能是开发者常用的功能之一。本文详细介绍了 `wx.chooseImage` 和 `wx.uploadFile` 的使用方法及注意事项。通过 `wx.chooseImage`,用户可以选择本地图片或拍摄新照片,而 `wx.uploadFile` 则用于将选中的图片上传到服务器。文章还提供了代码示例,帮助开发者更好地理解和应用这两个 API。此外,文中还讨论了常见的错误处理和性能优化技巧,确保图片上传过程的稳定性和高效性。 ... [详细]
  • 本文详细解析了ASP.NET 2.0中的Callback机制,不仅介绍了基本的使用方法,还深入探讨了其背后的实现原理。通过对比Atlas框架,帮助读者更好地理解和应用这一机制。 ... [详细]
  • 2022年2月 微信小程序 app.json 配置详解:启用调试模式
    本文将详细介绍如何在微信小程序的 app.json 文件中启用调试模式(debug),并通过实际案例展示其配置方法和应用场景。 ... [详细]
  • 如何发送微信语音口令红包
    微信不仅支持传统的文字口令红包,还新增了语音口令红包功能。用户可以通过语音口令来领取红包,增加了趣味性和互动性。本文将详细介绍如何发送微信语音口令红包。 ... [详细]
  • 微信小程序详解:概念、功能与优势
    微信公众平台近期向200位开发者发送了小程序的内测邀请。许多人对微信小程序的概念还不是很清楚。本文将详细介绍微信小程序的定义、功能及其独特优势。 ... [详细]
  • 对于众多创业公司而言,选择小程序或小视频的发展方向至关重要。本文将深入分析小程序和小视频的特点、优势及局限,帮助创业者做出更明智的选择。 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 据《经济参考报》报道,微信即将推出新版小程序,预计将在近期正式上线。此次更新将新增支付功能,进一步提升用户体验。此外,新版小程序还将提供“附近门店”接口,用户可通过定位功能轻松查找周边门店,享受更加便捷的服务。这一系列改进旨在为用户提供更加丰富和高效的使用体验。 ... [详细]
  • 微信小程序实现类似微博的无限回复功能,内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,HTML页面中包含了一些示例图片,开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计,帮助读者更好地理解和实现这一功能。 ... [详细]
  • 经过短暂的休整,我们再次推出新的小程序功能,进一步提升用户体验。现在,小程序页面不仅支持放置转发按钮,还新增了长按快速转发的功能,让用户能够更加便捷地分享页面内容。这一更新将为开发者提供更多创意空间,同时也大幅提升了用户的互动性和使用便利性。 ... [详细]
  • Java 点餐系统源代码附带管理后台(免费提供)
    本项目提供了一套基于 Java 的点餐系统,包括前端小程序和后端管理平台。采用 Spring Boot 和 SSM 框架,结合 MySQL 和 Redis 数据库技术,适用于学习和二次开发。有需要源代码的开发者可以通过私信联系,免费获取下载链接。 ... [详细]
  • 基于Java的微信小程序:Spring Boot驱动的中小学家校互动与电子作业管理平台
    基于Java的微信小程序,采用Spring Boot作为后端框架,构建了一个高效的中小学家校互动与电子作业管理平台。前端使用了uni-app框架,确保跨平台兼容性。该平台集成了家校沟通、作业发布与管理、学生成绩查询等功能,旨在提升教育管理效率和家长参与度。后端开发环境配置完善,采用Spring Boot、MyBatis等技术栈,确保系统的稳定性和扩展性。 ... [详细]
  • 深入解析微信小程序开发中的全局配置文件设置与优化技巧
    本文深入探讨了微信小程序开发中全局配置文件的设置与优化技巧,详细解析了 `app.js`、`app.json`、`app.wxss` 和 `project.config.json` 的功能与最佳实践。通过合理配置这些文件,开发者可以显著提升小程序的性能和用户体验。文章还介绍了如何利用这些配置文件进行模块化开发和调试,帮助开发者更好地管理和维护小程序项目。 ... [详细]
  • 《精通 jQuery》第六章:深入解析与实战应用
    《精通 jQuery》第六章:深入解析与实战应用本章详细探讨了 Ajax 技术的核心机制及其实际应用。Ajax 通过 XMLHttpRequest 对象实现客户端与服务器之间的异步数据交换,从而在不重新加载整个页面的情况下更新部分内容。这种技术不仅提升了用户体验,还提高了应用的响应速度和效率。此外,本章还介绍了如何利用 jQuery 简化 Ajax 操作,并提供了多个实战案例,帮助读者更好地理解和掌握这一重要技术。 ... [详细]
  • 如何撰写PHP电商项目的实战经验? ... [详细]
author-avatar
UP向日葵氵于磊Z
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有