微信小程序实现页面下拉刷新和上拉加载功能详解


Posted in Javascript onDecember 03, 2018

本文实例讲述了微信小程序实现页面下拉刷新和上拉加载功能。分享给大家供大家参考,具体如下:

web手机端或App中经常会有下拉刷新,上拉加载这些功能。

微信小程序中如何实现下拉刷新,上拉加载的功能。

实现思路:

1.监听界面的下拉刷新事件和上拉加载事件

  • bindscrolltolower 监听上拉加载
  • bindscrolltoupper 监听下拉刷新

2.下拉刷新时清空数据列表,并重新请求数据进行界面展示。

3.上拉加载增量请求数据,增量增加数据列表,增量界面展示

效果图:

微信小程序实现页面下拉刷新和上拉加载功能详解

实现代码:

WaterFall.wxml:

<!--pages/WaterFall/WaterFall.wxml-->
<view style="display:none">
 <image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" bindload="onImageLoad"></image>
</view>
<scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages" bindscrolltoupper="PullDownRefresh">
 <view style="width:100%">
  <view class="img_item">
   <view wx:for="{{col1}}" wx:key="id">
    <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image>
   </view>
  </view>
  <view class="img_item">
   <view wx:for="{{col2}}" wx:key="id">
    <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image>
   </view>
  </view>
 </view>
</scroll-view>

WaterFall.js:

let col1H = 0;
let col2H = 0;
Page({
 data: {
  scrollH: 0,
  imgWidth: 0,
  loadingCount: 0,
  images: [],
  col1: [],
  col2: []
 },
 onLoad: function () {
  wx.getSystemInfo({
   success: (res) => {
    let ww = res.windowWidth;
    let wh = res.windowHeight;
    let imgWidth = ww * 0.48;
    let scrollH = wh;
    this.setData({
     scrollH: scrollH,
     imgWidth: imgWidth
    });
    //加载首组图片
    this.loadImages();
   }
  })
 },
 PullDownRefresh:function(){
  console.log("页面下拉2");
 },
  onShow: function () {
   console.log("页面显示");
 },
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
  console.log("页面隐藏");
 },
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
  console.log("点击分享");
 },
 onImageLoad: function (e) {
  let imageId = e.currentTarget.id;
  let oImgW = e.detail.width;     //图片原始宽度
  let oImgH = e.detail.height;    //图片原始高度
  let imgWidth = this.data.imgWidth; //图片设置的宽度
  let scale = imgWidth / oImgW;    //比例计算
  let imgHeight = oImgH * scale;   //自适应高度
  let images = this.data.images;
  let imageObj = null;
  for (let i = 0; i < images.length; i++) {
   let img = images[i];
   if (img.id === imageId) {
    imageObj = img;
    break;
   }
  }
  imageObj.height = imgHeight;
  let loadingCount = this.data.loadingCount - 1;
  let col1 = this.data.col1;
  let col2 = this.data.col2;
  //判断当前图片添加到左列还是右列
  if (col1H <= col2H) {
   col1H += imgHeight;
   col1.push(imageObj);
  } else {
   col2H += imgHeight;
   col2.push(imageObj);
  }
  let data = {
   loadingCount: loadingCount,
   col1: col1,
   col2: col2
  };
  //当前这组图片已加载完毕,则清空图片临时加载区域的内容
  if (!loadingCount) {
   data.images = [];
  }
  this.setData(data);
 },
 loadImages: function () {
  let images = [
   { pic: "../../images/1.png", height: 0 },
   { pic: "../../images/2.png", height: 0 },
   { pic: "../../images/3.png", height: 0 },
   { pic: "../../images/4.png", height: 0 },
   { pic: "../../images/5.png", height: 0 },
   { pic: "../../images/6.png", height: 0 },
   { pic: "../../images/7.png", height: 0 },
   { pic: "../../images/8.png", height: 0 },
   { pic: "../../images/9.png", height: 0 },
   { pic: "../../images/10.png", height: 0 },
   { pic: "../../images/11.png", height: 0 },
   { pic: "../../images/12.png", height: 0 },
   { pic: "../../images/13.png", height: 0 },
   { pic: "../../images/14.png", height: 0 }
  ];
  console.log("dasddasd" + images);
  let baseId = "img-" + (+new Date());
  for (let i = 0; i < images.length; i++) {
   images[i].id = baseId + "-" + i;
  }
  this.setData({
   loadingCount: images.length,
   images: images
  });
 }
})

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
jquery插件格式实例分析
Jun 16 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 #Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 #Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 #Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 #Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 #Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 #Javascript
从零开始实现Vue简单的Toast插件
Dec 03 #Javascript
You might like
PHP防止注入攻击实例分析
2014/11/03 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
PHP 验证登陆类分享
2015/03/13 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
jQuery技巧总结
2011/01/01 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
在Python中使用dict和set方法的教程
2015/04/27 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
Python3离线安装Requests模块问题
2019/10/13 Python
如何运行带参数的python脚本
2019/11/15 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
Java软件工程师综合面试题笔试题
2013/09/08 面试题
父亲八十大寿答谢词
2014/01/23 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
护理专业自荐书
2014/06/04 职场文书
团队队名口号大全
2014/06/06 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
清洁工岗位职责
2015/02/13 职场文书
2015年班组长工作总结
2015/04/10 职场文书
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle