java上拉变量_「小程序JAVA实战」小程序页面的上拉下拉刷新(50)
前已经完成了小程序的列表展示,但是对于上拉和下拉刷新这个功能,其实跟小程序的生命周期有关系,一起回顾下完成,上拉和下拉刷新。源码:https://github.com/limingios/wxProgram.git 中wx-springboot 和 No.15
回顾下 page的生命周期https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
列表小程序端完成 上拉,下拉刷新功能onReachBottom 上拉刷新
onPullDownRefresh 下拉刷新需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
const app = getApp()
Page({
data: {
// 用于分页的属性
totalPage: 1,
page: 1,
videoList: [],
screenWidth: 350,
serverUrl: "",
},
onLoad: function (params) {
var me = this;
var screenWidth = wx.getSystemInfoSync().screenWidth;
me.setData({
screenWidth: screenWidth,
});
// 获取当前的分页数
var page = me.data.page;
me.getAllVideosList(page);
},
getAllVideosList:function(page){
var me = this;
var serverUrl = app.serverUrl;
wx.showLoading({
title: '请等待,加载中...',
});
wx.request({
url: serverUrl + '/video/showAll?page=' + page,
method: "POST",
success: function (res) {
wx.hideLoading();
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh();
console.log(res.data);
// 判断当前页page是否是第一页,如果是第一页,那么设置videoList为空
if (page === 1) {
me.setData({
videoList: []
});
}
var videoList = res.data.data.rows;
var newVideoList = me.data.videoList;
me.setData({
videoList: newVideoList.concat(videoList),
page: page,
totalPage: res.data.data.total,
serverUrl: serverUrl
});
}
})
},
onPullDownRefresh: function (params) {
var me = this;
wx.showNavigationBarLoading();
me.getAllVideosList(1);
},
onReachBottom: function (params){
var me = this;
var currentPage = me.data.page;
var totalPage = me.data.totalPage;
//判断当前页数和总页数是否相等,如果相同已经无需请求
if (currentPage == totalPage){
wx.showToast({
title: '已经没有视频啦~',
icon:"none"
})
return;
}
var page = currentPage+1;
me.getAllVideosList(page);
}
})
PS:上拉刷新不需要做任何的配置,下拉刷新需要开启配置,每次请求建议开启 wx.showNavigationBarLoading() 和 wx.hideNavigationBarLoading(); 配合使用。
java上拉变量_「小程序JAVA实战」小程序页面的上拉下拉刷新(50)相关推荐
- 「小程序JAVA实战」 小程序远程调试(九)
在开发javaweb应用的时候,如果遇见一个问题都会调试,debug,在火狐和谷歌浏览器的时候我们也可以使用断点的方式调试js,小程序可以吗?肯定是可以的!小程序的调试也可以在手机端进行远程调试.源码 ...
- php微信wifi扫码连接不上,微信「扫码连WiFi」小程序,教你不用密码一键连Wi-Fi!...
原标题:微信「扫码连WiFi」小程序,教你不用密码一键连Wi-Fi! 烦恼!你有过的烦恼是什么? 你最近的烦恼是什么? 你有没有在外面支付的时候遇到一个麻烦? 你本来连接好好的Wi-Fi,突然在你支付 ...
- 「微信同声传译」小程序插件:快速实现语音转文字、文本翻译、语音合成等能力...
上期,我们在<「医院 LBS 位置服务」插件:输出LBS室内位置能力,为改善就医服务提供解决方案>一文中介绍了「医院 LBS 位置服务」小程序插件的意义.使用场景以及使用方法. 今天我们为 ...
- 「微信同声传译」小程序插件
上期,我们在<「医院 LBS 位置服务」小程序插件>一文中介绍了「医院 LBS 位置服务」小程序插件的意义.使用场景以及使用方法. 今天我们为大家推荐的插件是「微信同声传译」,如果你想在小 ...
- 纯前端实现「羊了个羊」小游戏
点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 作者:QCY https://juejin.cn/post/7143897892531486727 背景 最近简单的「羊了个羊」小游戏火到 ...
- < 纯前端实现「羊了个羊」小游戏 >
纯前端实现「羊了个羊」小游戏
- miniui datagrid 隐藏列默认赋值_「小程序JAVA实战」 小程序默认加载的页面和生命周期(八)...
小程序如何加载的呢?生命周期!源码:https://github.com/limingios/wxProgram.git 中的No.3 加载页面 小程序默认加载的pages中的第一个目录 不管你的名称 ...
- java -jar 指定端口_「Linux命令」-Java程序员需要掌握的10个命令
作为服务端开发的同学,经常会与linux服务器打交道,一些用的命令必须要掌握. 1.top命令-观察服务端负载情况 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况 ...
- amd cpu不能在cmd环境下运行java代码_「我们一起学Java02」JDK、JRE、JVM简介,Java开发平台的搭建...
Hello,各位头条的读者大家好!接下来一段时间小编将和大家一起学习Java,"我们一起学Java"专题将会持续更新,欢迎大家关注.这里是"我们一起学Java" ...
最新文章
- 科大讯飞的2018:深陷同传造假及炒房风波,市值遭腰斩蒸发600亿
- java jdbc连接数据库的设计
- 移动Web开发实践——解决position:fixed自适应BUG
- 榴莲还有奶油、花生味 印尼出新品售价近7000人民币
- 云服务器 VNC 远程连接
- Java 8中java.util.function包中的谓词和使用者接口
- vue项目中z-index不起作用(将vue实例挂在到window上面)
- C#图片处理之:图片缩放和剪裁
- 如何在 Mac 上的“音乐”应用和 iTunes 中创建 Genius 播放列表?
- H - 数论中的异或 HRBUST - 1688
- 智慧城市的宠儿 大数据为城市建设添彩
- 前端练手项目合集40.0个,附源码,2022年最新
- 世界计算机组装最快记录,国产世界最快超级计算机开机1分钟 地球人算32年
- android平台支付宝快捷支付
- 偶数c语言中怎么写,偶数怎么写
- CWS(美国国土安全部下属的软件保证项目)与SANS(权威安全培训组织)联合编制的最危险的25个编程错误
- 基于Android平台的手机安全助手的设计与实现
- 变相激发FileUpload事件
- 计算机网络——传输层の选择题整理
- 电镀废水除镍、电镀废水除总铬的工艺技术汇总分享
热门文章
- Python 科学计算—— 数值问题
- leetcode —— 字符串相关(28、344)
- python初学者怎么入门-初学者如何学习Python?掌握这17个实用小技巧快速入门!...
- 自学python编程笔记本推荐-python自学教程 | 3万字为你详解每个重要知识点
- 学了python能干啥举例-django能干什么
- python零基础学习书-零基础学Python,不容错过的入门书籍
- python的读音-python怎么读?python的含义和读音!
- 大热的麦克风阵列语音识别系统的设计和轻松实现,提供软硬件解决方案
- 科大讯飞 语音识别 VB WIN10 X64 VS2017
- 在线教育行业APP高效开发解决方案