微信小程序下拉刷新和上拉加载
效果图
微信小程序实现下拉刷新和上拉加载有2中方法
1 用系统自带的 个人感觉特别简单
2 使用scroll-view 实现,
scroll-view 里面有2个属性是滑动到顶部以及到底部如下
其实就是滑动到顶部和底部的时候请求网络,就行了,
第一种方法说明:
在json里面先声明这个界面要用到刷新
{
"enablePullDownRefresh": true,
"backgroundColor": "#e5e5e5",
"onReachBottomDistance": 50
}
这里我设置了一个背景颜色,不然的话白色看到效果
在xml中定义一个list
<view class="content">
<view class="list" wx:for="{{dataList}}" wx:key="list">
{{item}}</view>
</view>
js里面
调用onPullDownRefresh()和onReachBottom() 里面添加网络请求即可,
注意加载是从底部add进去的,用push 方法即可,当然还有其他的方法自己可以百度下
下面给出模拟的,
Page({
data: {
dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
count: 0
},
onPullDownRefresh() {
var self = this;
setTimeout(() => {
// 模拟请求数据,并渲染
var arr = self.data.dataList, max = Math.max(...arr);
for (var i = max + 1; i <= max + 3; ++i) {
arr.unshift(i);
}
self.setData({ dataList: arr });
// 数据成功后,停止下拉刷新
wx.stopPullDownRefresh();
}, 1000);
},
onReachBottom() {
var arr = this.data.dataList, max = Math.max(...arr);
if (this.data.count < 3) {
for (var i = max + 1; i <= max + 5; ++i) {
arr.push(i);
}
this.setData({
dataList: arr,
count: ++this.data.count
});
} else {
wx.showToast({
title: '没有更多数据了!',
})
}
}
})
这样是实现了刷新和加载了....
demo index里面是系统的,refresh是用scroll-view实现的,如果想切换在json里面切换显示的界面就行,我没有添加点击跳转的按钮
给出demo地址吧
demo地址,如果帮助了您希望给一个star
微信小程序下拉刷新和上拉加载相关推荐
- php微信小程序向下滑动,微信小程序功能实现:上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
- 微信小程序中使用echart、动态加载几条折线
一.示例 echart小程序示例 gitub地址:GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本 在小程序中放入 效果 二. 小 ...
- 微信小程序双瀑布流布局+动态懒加载
效果图 实现代码: 思路: 将双瀑布流分为left.right两个数据流,通过动态获取两边数据的动态高度来进行判断,下一条数据插入低的一方. 因为用户所上传图片高度不一致,所以image的mode属性 ...
- 【微信技术-微信小程序】------- 渐进式骨架屏(加载流)(第二篇)
提示:看如下内容需要了解第一篇:简单入门(骨架屏(加载流) 简单入门(第一篇)) 目录 一.什么是渐进式骨架屏? 二.实现渐进式骨架屏 三.效果展示 下载示例代码地址: 渐进式骨架屏示例代码-下载 一 ...
- 微信小程序图片处理方案,解决加载缓慢,影响用户体验
1.改变图片尺寸:对于上传的图片,在后台对图片进行可接受范围内的最大限度压缩,图片宽高不用太大,大概预留你图片容器的1.5倍就行了,除非你做图片放大镜功能,否则小程序上加载2倍图意义不大,清晰度体验也 ...
- 【微信小程序】image真机无法加载网络图片
背景 由于最近路边的停车位都被无情的创收铲掉了!今天把车停在了路边,可能是挡住了行人的路,被贴了个条,还留了个纸条--没有你的随车电话,我只能点电话举报你了.气的我牙痒痒! 只能回来自己撸一个挪车电话 ...
- 微信小程序云数据库触底分页加载,下拉无限加载,第一次请求数据随机,随机获取数据库的数据
效果图 小程序云开发分页加载代码 <!--pages/chatList/chatList.wxml--> <view class="pageTitle">家 ...
- 微信小程序实现FBX模型的动画加载
鉴于有CSDN友问我FBX模型在小程序端加载的问题,我就在这里给大家介绍一下吧~ 首先,加载fbx模型,我们用到的是three.js和不同的模型类型的加载库,那么,我们在得到了web版本的加载库的前提 ...
- 微信小程序媒体组件-image图片懒加载效果
image 基础库 1.0.0 开始支持,低版本需做兼容处理. 图片.支持 JPG.PNG.SVG.WEBP.GIF 等格式,2.3.0 起支持云文件ID. 属性 类型 默认值 必填 说明 最低版本 ...
- 微信小程序实现图片或gif预加载
微信官方原文链接 链接: 官方解释. 最后实现代码 wx.getImageInfo({src: 'gif动画地址',success (res) {console.log(res)} }) 但是你用过之 ...
最新文章
- 2D-2D:对极约束
- 编码问题(BOM头简单了解)
- JasperReports是一个开源的java报表制作引擎
- 华章7-8月份新书简介(2015年)
- 使用RxJava和SseEmitter进行服务器发送的事件
- 利用反射,批量启动WCF服务
- android 混淆方法名,android – 如何告诉Proguard混淆类名
- 面板数据回归模型(固定效应、随机效应、混合回归、变系数)、面板数据AR、VAR模型
- SAP License:SAP PFCG或SEARCH_SAP_MENU文本乱码
- 简单模拟QQ界面框架。
- linux network 脚本,自动修改Linux下/etc/sysconfig/network-scripts/ifcfg-ethX网卡文件的脚本...
- web 流程图工具_要什么第三方流程图制作软件,微软的Visio 2016不香吗?
- 【语音识别】基于matlab GUI BP神经网络0到10数字语音识别【含Matlab源码 672期】
- django学习日志(模板的渲染过程)第八部分:字符串数据转义
- 匈牙利算法【匹配问题】
- cc2430 外部中断
- 如何批量将PNG格式转化为JPG格式
- 数据库管理员详细介绍
- n2n内网穿透神器--可以用于设置rac搭建时的网卡(在云平台上有用)
- spring boot项目使用ojdbc8连接oracle 12c(12.2.0.1.0),解决启动极慢问题!