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


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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python字符串str和字节数组相互转化方法
2017/03/18 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
python爬取招聘要求等信息实例
2020/11/20 Python
python-地图可视化组件folium的操作
2020/12/14 Python
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
Pandas搭配lambda组合使用详解
2022/01/22 Python