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


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 相关文章推荐
js写一个字符串转成驼峰的实例
Jun 21 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
js实现内置计时器
Dec 16 Javascript
javascript实现倒计时效果
Feb 17 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
微信小程序在地图选择地址并返回经纬度简单示例
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中计算字符串相似度的函数代码
2012/12/29 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
对python sklearn one-hot编码详解
2018/07/10 Python
世界最大的票务市场:viagogo
2017/02/16 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
拉歌口号大全
2014/06/13 职场文书
2014年老干部工作总结
2014/11/21 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
Java死锁的排查
2022/05/11 Java/Android
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server