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


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继承机制的设计思想分享
Aug 28 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
详解javascript replace高级用法
Feb 17 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实现递归复制整个文件夹的类实例
2015/08/03 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
jQuery操作css样式
2017/05/15 jQuery
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
详解Python3 基本数据类型
2019/04/19 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
django rest framework serializers序列化实例
2020/05/13 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
挑战杯创业计划书的写作指南
2014/01/07 职场文书
委托书范文
2014/04/02 职场文书
教师求职信
2014/06/17 职场文书
作风整顿剖析材料
2014/09/30 职场文书
教导主任个人总结
2015/03/03 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
2015年市场部工作总结
2015/04/30 职场文书
雷锋的观后感
2015/06/10 职场文书
保护动物的宣传语
2015/07/13 职场文书
退休欢送会致辞
2015/07/31 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
素质教育培训心得体会
2016/01/19 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
Python 中的Sympy详细使用
2021/08/07 Python