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


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获取input表单值的代码
Apr 19 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
python批量下载图片的三种方法
2013/04/22 Python
使用python实现rsa算法代码
2016/02/17 Python
python支付宝支付示例详解
2019/08/22 Python
Python获取时间戳代码实例
2019/09/24 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Python运行DLL文件的方法
2020/01/17 Python
使用Python实现牛顿法求极值
2020/02/10 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
大学生求职推荐信
2013/11/27 职场文书
入股协议书范本
2014/04/14 职场文书
气象学专业个人求职信
2014/04/22 职场文书
五年级学生评语大全
2014/12/26 职场文书
安全生产先进个人总结
2015/02/15 职场文书
大学生自荐书范文
2015/03/05 职场文书
国际贸易实训总结
2015/08/03 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers