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


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 相关文章推荐
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 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/08/26 PHP
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
javascript运动详解
2015/07/06 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
Python使用django获取用户IP地址的方法
2015/05/11 Python
详解Python中的元组与逻辑运算符
2015/10/13 Python
python使用epoll实现服务端的方法
2018/10/16 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
python实现三维拟合的方法
2018/12/29 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
简单了解python的内存管理机制
2019/07/08 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
优秀高中生事迹材料
2014/02/11 职场文书
《落花生》教学反思
2014/02/25 职场文书
开发房地产协议书
2014/09/14 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
python内置进制转换函数的操作
2021/06/02 Python
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js