微信小程序上划加载下划刷新

最新推荐文章于 2025-03-13 09:51:25 发布
最新推荐文章于 2025-03-13 09:51:25 发布
阅读量622 收藏
点赞数
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pipidan_/article/details/103616790
版权

获取列表

data: {
	limit: 20,//每次获取的条数
	offset: 0,//偏移量（从第几条获取）
	total: 0,//列表总数
	list: [],//列表
},
getList: function(limit, offset){
	wx.stopPullDownRefresh();//停止当前页面下拉刷新
	//省略获取接口的过程，接口返回值为resTotal,resList
	this.setData({
		total: resTotal,
		list: this.data.list.concat(resList)
	})
},

上划加载

onReachBottom: function() {
    if (this.data.list.length < this.data.total) {
      this.setData({
        offset: this.data.limit + this.data.offset
      })
      this.getList(this.data.limit, this.data.offset);
    }
  }

下划刷新

需在当前页面的json文件设置 “enablePullDownRefresh”: true

onPullDownRefresh: function() {
	this.setData({
        list: [],
        offset: 0
      })
      this.getList(this.data.limit, this.data.offset);
  },
小白学习微信小程序的下拉刷新和上拉加载更多
wx_linying1029的博客
08-15 142
下拉刷新和上拉加载更多是微信小程序中常见的功能之一，这两个功能可以让用户实现页面内容的更新和加载更多数据。函数中发送请求获取下一页的数据，并将数据添加到当前页面内容的末尾。希望上述内容能对你有所帮助，如果还有其他问题，欢迎随时追问。手动触发下拉刷新，以便用户在不下拉页面的情况下更新数据。函数中发送请求获取最新的数据，并更新页面内容；首先，在页面的wxml文件中添加一个。然后，在页面的js文件中，定义一个。然后，在页面的js文件中，定义一个。首先，在页面的wxml文件中给。同时，你可以通过调用。
uniapp触发了上拉刷新
weixin_48383771的博客
04-27 441
<script> export default { data() { return { page:3, count:5, } }, onLoad() { }, methods: { }, onPullDownRefresh() { console.log("触发了下拉刷新") }, onReachBottom() { console.log("触发了上拉刷新") var that
微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（一）
01-03
微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（一） 页面缓存的设置优化了页面加载，减少了频繁的调取接口，使用户在断网的情况下有更好的体验。 每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。 注意： localStorage 是永久存储的，但是我们不建议将关键信息全部存在 localStorage，以防用户换设备
微信小程序分页上滑加载
meiwan123的博客
04-28 1719
微信上滑加载有一个事件 /** * 页面上拉触底事件的处理函数 */ onReachBottom() { // 显示加载图标 wx.showLoading({ title: '玩命加载中', }) // this.onloadrecordsList() this.getMore1() ...
微信小程序中的“页面下拉刷新”和“上拉加载更多”是如何实现的？
最新发布
长风破浪会有时的博客
03-13 1720
就像在玩具滑梯上实现“下拉刷新”和“上拉加载更多”一样，微信小程序的内置功能帮助我们轻松实现这两个交互效果！以下是一个完整的例子，展示如何同时实现“下拉刷新”和“上拉加载更多”。微信小程序提供了内置的支持，通过配置和事件绑定即可实现这两个功能。
微信小程序上滑加载更多
weixin_30507269的博客
08-15 226
onReachBottom: function () { var that = this var limit = that.data.limit var count = that.data.count if(count>limit){ limit = limit + 5 }else{ wx.showToa...
微信小程序的上拉刷新与下拉刷新
H1453571548的博客
11-01 767
(string) 设置自定义下拉刷新默认样式，支持设置 black | white | none， none 表示不使用默认样式。(boolean) 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发。(eventhandle) 滚动到底部/右边时触发。(eventhandle) 自定义下拉刷新被触发。效果图如下： 上拉刷新 与 下拉刷新。
【微信小程序开发】小程序中的上滑加载更多，下拉刷新是如何实现的？
热门推荐
景天科技苑
06-05 2万+
小程序是如何实现下滑加载更多数据，下拉刷新页面的，本文就来详细探讨一下。
微信小程序：下拉动作
干饭搬砖两不误。
01-09 1363
简介 小程序项目中有个需求：用户聊天时可以下拉加载历史消息。于是看了下小程序自带的方法，比较简单，分享给大家。 具体实现 1、在要实现效果的页面的相关 .json文件中设置window属性：下拉事件。还可以追加一个加载过程中的动画样式，但是只支持两种（“dark”、“light”）。 "enablePullDownRefresh": true, "backgroundTextStyle": ...
javaScript入门基础知识点
m0_63262511的博客
12-21 1279
声明了变量，但是没有赋值2.2.1、特殊情况：0：如果前面的数字是由0x开头的转换为16进制，由0开头转换为8进制，正常数字转为10进制，非数字转为NaN1：如果为1，则不管前面是不是数字都转换为NaN​​​// 12​// 12​// NaN​// NaN​//NaN​//NaN​//NaN​//NaN​//NaN//0//0为真时// 3// 10为假时// 0// 0。
Android重点面试题
weixin_44440150的博客
05-24 1039
视频播放 视频播放的实现方式？ 1、使用其自带的播放器。指定Action为ACTION_VIEW,Data为Uri，Type为其MIME类型。 2、使用VideoView来播放。在布局文件中使用VideoView结合MediaController来实现对其控制。 3、使用MediaPlayer类和SurfaceView来实现，这种方式很灵活。 4、还有一些三方的（节操视频，饺子视频）的使...
小程序demo--上拉加载
03-08
小程序demo--上拉加载
微信小程序如何实现上拉刷新（即分页加载数据）？
fangqi20170515的博客
07-15 4255
enablePullDownRefresh可以写在app.json中和页面的xx.json,两者的区别是,app.json是全局型。步骤2、找到事件处理函数onPullDownRefresh重置数据，重置页码设置为1，重新请求数据；//在当前页面隐藏导航条加载动画。在当前页面显示导航条加载动画。在xxx.json文件中设置enablePullDownRefresh。wx.stopPulIDownRefresh()//停止”下拉刷新。的下拉刷新，而xx.json是单个页面的下拉刷新。.............
小程序--上划加载更多 下拉刷新
qq_41082746的博客
08-12 393
var util = require('../../../utils/util.js'); var app = getApp(); Page({ data: { totalCount:0, isEmpty:true, requestUrl: "", }, //使用scroll-view组件 设置高度 当滑动此高度时就会触发此组建的bindscrolltolow...
微信小程序上滑懒加载数据
m0_58849641的博客
08-12 595
1.最开始渲染数据方法 async getWuchangList(){ const wuchang_list=await getWuchangList(this.data.queryParams) const total=wuchang_list.data.length this.data.totalPage=Math.ceil(total/this.data.queryParams.pageSize) this.setData({ wuchangList:[...this.dat
微信小程序上滑触底加载更多
ai_xy的博客
04-12 698
js中编写触底加载更多数据大致逻辑，根据自身情况稍作修改即可 var app = getApp(); const api = require('../utils/api'); Page({ data: { dataList: [], //数据列表 pageNum: 1, //页数 pageSize: 12, //每页数据条数 dataBack: true, //触底加载 }, loadMoreData: function() { var _thi
微信小程序下拉刷新、上拉加载
张营的技术博客
12-18 2032
微信小程序官方没有给出具体的下拉刷新和上拉加载组件，我们可以基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载、下拉刷新组件。
小程序上拉加载功能
LaiMingxue_的博客
05-29 1653
小程序上拉加载功能 随着手指向上拉动不断加载更多的数据这种做法在现在的移动端很常见，这种就是接下来要做的上拉加载。这样做可以加快加载速度，按需加载，不用一上来就把所有的数据都请求过来。 做上拉加载之前先来理清一下思路： 移动端的上拉加载其实相当于pc端的分页功能，初始加载第一页的数据（page=1），把数据渲染到页面，并把总页数的值保存起来； 当页面滚动触底时就触发事件向服务器发起请求加载第二页的数据（page+1），将返回的数据做数组的拼接重新渲染到页面； page每次累加都要判断是否小于总页数，若小于
微信小程序，如何知道用户上划，轻触，下划
01-09
微信小程序可以通过监听触摸事件来知道用户的上划、轻触和下划操作。具体的方法如下： 1. 上划操作：可以通过监听`touchstart`和`touchend`事件来判断用户是否进行了上划操作。当用户开始触摸屏幕时，会触发`touchstart`事件，当用户结束触摸并离开屏幕时，会触发`touchend`事件。通过比较触摸开始和结束的位置，可以判断用户是否进行了上划操作。 2. 轻触操作：可以通过监听`tap`事件来判断用户是否进行了轻触操作。当用户在屏幕上快速点击时，会触发`tap`事件。 3. 下划操作：可以通过监听`touchstart`和`touchend`事件来判断用户是否进行了下划操作。当用户开始触摸屏幕时，会触发`touchstart`事件，当用户结束触摸并离开屏幕时，会触发`touchend`事件。通过比较触摸开始和结束的位置，可以判断用户是否进行了下划操作。 以下是一个示例代码，演示了如何在微信小程序中监听触摸事件并判断用户的上划、轻触和下划操作： ```javascript // 监听触摸开始事件 wx.onTouchStart(function(event) { // 记录触摸开始的位置 this.startY = event.touches[0].clientY; }); // 监听触摸结束事件 wx.onTouchEnd(function(event) { // 记录触摸结束的位置 var endY = event.changedTouches[0].clientY; // 判断上划操作 if (endY - this.startY < 0) { console.log("用户进行了上划操作"); } // 判断轻触操作 if (Math.abs(endY - this.startY) < 10) { console.log("用户进行了轻触操作"); } // 判断下划操作 if (endY - this.startY > 0) { console.log("用户进行了下划操作"); } }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值