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


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 相关文章推荐
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
如何编写高质量JS代码
Dec 28 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 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标签云的实现代码
2012/10/10 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
javascript数组详解
2014/10/22 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
python基础教程之基本内置数据类型介绍
2014/02/20 Python
python用户管理系统
2018/03/13 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
应聘医学检验人员自荐信
2013/09/27 职场文书
电脑饰品店的创业计划书
2014/01/21 职场文书
大学生校园创业计划书
2014/02/08 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
销售队伍口号
2014/06/11 职场文书
新店开张活动方案
2014/08/24 职场文书
高中英语教学反思范文
2016/03/02 职场文书
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android