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


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弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
Zend的MVC机制使用分析(二)
2013/05/02 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
php实现登陆模块功能示例
2016/10/20 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
解决python报错MemoryError的问题
2018/06/26 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
sklearn的predict_proba使用说明
2020/06/28 Python
Python接口自动化测试的实现
2020/08/28 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
英语系本科生求职信范文
2013/12/18 职场文书
软件项目实施计划书
2014/05/02 职场文书
防灾减灾标语
2014/10/07 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书