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


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 相关文章推荐
利用location.hash实现跨域iframe自适应
May 04 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
用javascript实现倒计时效果
Feb 09 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 应用程序安全防范技术研究
2009/09/25 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
thinkphp缓存技术详解
2014/12/09 PHP
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
js实现随机数小游戏
2019/06/28 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
React实现todolist功能
2020/12/28 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
python logging日志模块原理及操作解析
2019/10/12 Python
python中for in的用法详解
2020/04/17 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
如何利用find命令查找文件
2015/02/07 面试题
武当山导游词
2015/02/03 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL