支付宝小程序-上拉加载,下拉刷新
这里写目录标题
- 准备工作(坑)
- 所有代码
- html
- css
- js
准备工作(坑)
官网-下拉刷新:https://opendocs.alipay.com/mini/api/wo21qk
下拉刷新的准备工作(坑)
● 需要在 app.json 的 window 选项中配置 “allowsBounceVertical”:“YES”,在页面对应的 .json 配置文件中配置 “pullRefresh”:true 选项,才可开启页面下拉刷新事件。
所有代码
html
<view><view class="myscroll-wrap"><view class="item" a:for="{{list}}">{{index+1}} 第{{pageIndex}}页</view><view class="loading" a:if="{{loading}}">正在加载中...</view></view>
</view>
css
.myscroll-wrap .item{height: 200rpx;padding: 30rpx;border-bottom: 1rpx solid ;
}
.loading{display: flex;width: 100%;height: 100rpx;background: #eee;align-items: center;justify-content: center;
}
js
Page({data: {list:[],pageIndex: 0,pageNum: 10, totalPage: 5,loading: false,isPullDownRefresh: false, // 是否在下拉刷新},onLoad() {this.getdata();},onPullDownRefresh() {// 页面被下拉console.log('页面被下拉: ');this.setData({isPullDownRefresh: true});this.getdata(1);},onReachBottom() {// 页面被拉到底部console.log('页面被拉到底部: ');if(this.data.pageIndex >= this.data.totalPage){console.log('加载完毕');this.setData({loading: false});return}this.getdata();},async getdata(pageIndex){if(this.data.isPullDownRefresh){this.setData({pageIndex: 1,list: []}) }console.log('获取数据: ');console.log('this.data.pageIndex: ', this.data.pageIndex);this.setData({loading: true});let list = this.data.list;for(let i=1; i<11;i++){list.push(i);}setTimeout(() => {this.setData({list,pageIndex: (this.data.pageIndex)+1,loading: false,isPullDownRefresh: false}) my.stopPullDownRefresh()}, 3000);}
});
支付宝小程序-上拉加载,下拉刷新相关推荐
- 微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据 下篇
事件(wxml)>bindscrolltolower="onscrollLower" slice() 方法可从已有的数组中返回选定的元素. 请注意,该方法并不会修改数组,而是 ...
- php微信小程序向下滑动,微信小程序功能实现:上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
- ionic上拉加载-下拉刷新
ionic上拉加载-下拉刷新 1.上拉加载 <ion-infinite-scroll on-infinite="loadOlderStories()" distance=&q ...
- Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法...
bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件 在 使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore ...
- php mescroll,mescroll.js上拉加载下拉刷新组件使用详解
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下 使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一 ...
- 教你如何使用SwipeRefreshLayout来构建一个上拉加载下拉刷新框架
前言: 基本上所以的移动端应用都有Listview(当然RecyclerView也一样),那必不可少的都会嵌入一个上拉加载下拉刷新的功能.这样能大大的减少用户的流量消耗,同样对于用户也有更好的用户体验 ...
- ios 上拉加载 下拉刷新
在一款 App应用中有的时候会用到上拉加载下拉刷新的功能,本人觉得SVPullToRefresh很好用(可以用在UIScrollView上,包括UITableview和UICollectionView ...
- 微信小程序下拉刷新列表onPullDownRefresh;微信小程序上划加载列表onReachBottom;uni-app微信小程序下拉加载数据;uni-app微信小程序上划页面加载数据
需求:微信小程序列表加载有两种方式,分别是按住页面下拉加载数据数据(触发onPullDownRefresh)和直接上划滚动页面到底部加载数据(触发onReachBottom函数). 本文主要是使用上划 ...
- 微信小程序入门五上滑加载下拉刷新
之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介绍加载和刷新. 效果图: 先介绍在IDE中,怎么模拟上滑这个操作.开始我是用鼠标点击文章列表,然后先上移动.结果一直没有结果,以为是 ...
- 微信小程序 上滑加载和下拉刷新
上滑加载 :上滑是指鼠标上滑或者手指上滑,此时滚动条向下滚动,加载旧数据. 下拉刷新:下拉是指鼠标下拉或者手机下拉,此时滚动条向上滚动,加载新数据. scroll-view方法遇到的问题:如果数据量很 ...
最新文章
- 揭秘Facebook SLAM技术,如何为人们生活增添奇幻的艺术色彩?
- java 遍历file_JAVA File类(文件的遍历,创建,删除)
- 这些大酒店用大数据和分析技术对我们做了什么?
- 目前计算机辅助数控编程的方法,数控编程试题(附自己整理的答案)
- block作用域与流程控制(块block、if-else、while、do-while、for-foreach、switch-case、break、continue、label)
- Golang的CSP很酷?其实.NET也可以轻松完成
- MySQL二进制日志操作
- python批量删除数据库记录_GitHub - TracyMcgrady6/pymsql_Operation: Python3操作mysql数据库,实现增、批量增、删、改、查...
- SPSS T检验(图文+数据集)【SPSS 017期】
- 统一管理所有随机启动的应用程序
- 黑白或彩色线稿地图设计定制装饰画中线条轮廓素材底图获取方法合集
- hive 漫威the_2021年即将上映的漫威电影
- 海思3559万能平台:VGS的画线处理
- 计算机专业素质拓展,创新与素质拓展学分.doc
- git进阶 | 03 -如何彻底删除git中的大文件
- 此 Google 帐号尚未与设备关联。要安装应用,请先访问设备上的 Play 商店应用。 了解详情
- 14-TSS切换实验
- 【精】EOS智能合约:system系统合约源码分析
- 7-40 奥运排行榜
- 微信开发中的php代码,从源代码中带你解析微信开发