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


Posted in Javascript onDecember 06, 2019

1.需要用到的组件和api

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

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

2.需要用到的属性

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

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

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

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

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

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

<scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='lower'>

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代码

<view class='box'>
<scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='lower'>
 <view wx:for="{{res}}" data-id="{{index}}" wx:key="{{index}}" style="height:{{(height/6)-1}}px;width:100%;text-align:center;line-height:{{(height/6)-1}}px; border-bottom:1px solid #ccc">{{item}}</view>
</scroll-view>
</view>

 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
    })
   }
  })
 }
})

总结

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

Javascript 相关文章推荐
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
layui表格分页 记录勾选的实例
Sep 02 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 #Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 #Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 #Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 #Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 #Javascript
vue中监听路由参数的变化及方法
Dec 06 #Javascript
详解ECMAScript2019/ES10新属性
Dec 06 #Javascript
You might like
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python常见排序算法基础教程
2017/04/13 Python
Python 通配符删除文件的实例
2018/04/24 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
python变量的存储原理详解
2019/07/10 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
测试时代收集的软件测试面试题
2013/09/25 面试题
医院我们的节日活动实施方案
2014/08/22 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
自荐信模板大全
2015/03/27 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
vue首次渲染全过程
2021/04/21 Vue.js