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


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 相关文章推荐
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
URL Rewrite的设置方法
2007/01/02 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
python调用c++传递数组的实例
2019/02/13 Python
使用python实现kNN分类算法
2019/10/16 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
C++是不是类型安全的
2014/02/18 面试题
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
使用JS实现简易计算器
2021/06/14 Javascript
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技