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上拉变量_「小程序JAVA实战」小程序页面的上拉下拉刷新(50)
前已经完成了小程序的列表展示,但是对于上拉和下拉刷新这个功能,其实跟小程序的生命周期有关系,一起回顾下完成,上拉和下拉刷新.源码:https://github.com/limingios/wxProg ...
- 解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题
解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题 参考文章: (1)解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题 (2)https://www.cnblogs.co ...
- html5上拉下拉刷新,APP 上拉加载,下拉刷新 介绍
开发APP时,很多时候都会用上,上拉加载数据,下拉刷新等功能,本文件介绍两种. 一种是原生APP自带的上拉加载,下拉刷新功能,一种是用JS 插件写的上拉加载,下拉刷新. 1.原生APP 的 上拉加载, ...
- 微信小程序【网易云音乐实战】(第四篇 用户登录、本地存储、视频播放、上拉下拉刷新)
一.用户登录 官网事件使用使用 1. 绑定事件 和 获取数据 bindinput :当输入框有变化时,触发事件. handleInput(event){// let type=event.curren ...
- java使用xml存储数据_「爬虫四步走」手把手教你使用Python抓取并存储网页数据
爬虫是Python的一个重要的应用,使用Python爬虫我们可以轻松的从互联网中抓取我们想要的数据,本文将基于爬取B站视频热搜榜单数据并存储为例,详细介绍Python爬虫的基本流程.如果你还在入门爬虫 ...
- python中飞机票购买程序_「最低折扣机票查询」Python 爬取携程所有机票找出最低折扣机票,让你无忧回家过年 - seo实验室...
最低折扣机票查询 前言 对于平时出行大多数人都是选择坐高铁,当然了如果这是对于距离比较近的行程是最划算的,如果对于路途长远的人言,提前购买飞机票价格可能比高铁票更加的便宜,如果我们可以爬取机票数据并分 ...
- java eclipse字体大小设置_「eclipse字体大小设置」Eclipse中调整字体的大小 - seo实验室...
eclipse字体大小设置 1.点击window,然后选择preferences,进入下面的界面.在输入框中输入font,然后选择colors and fonts ,再选择basic: 2.在basi ...
- 「小程序JAVA实战」 小程序远程调试(九)
在开发javaweb应用的时候,如果遇见一个问题都会调试,debug,在火狐和谷歌浏览器的时候我们也可以使用断点的方式调试js,小程序可以吗?肯定是可以的!小程序的调试也可以在手机端进行远程调试.源码 ...
- php微信wifi扫码连接不上,微信「扫码连WiFi」小程序,教你不用密码一键连Wi-Fi!...
原标题:微信「扫码连WiFi」小程序,教你不用密码一键连Wi-Fi! 烦恼!你有过的烦恼是什么? 你最近的烦恼是什么? 你有没有在外面支付的时候遇到一个麻烦? 你本来连接好好的Wi-Fi,突然在你支付 ...
最新文章
- ReentrantReadWriteLock
- 2018年计算机应用基础作业,2018年计算机应用基础作业二答案.doc
- 推荐系统炼丹笔记:用户评论在推荐中的应用
- 岗位推荐 | 深圳大学胡瑞珍博士组招收计算机图形学访问硕士/博士
- Types cannot be provided in put mapping requests, unless the include_type_name parameter is set to t
- 数学建模 线性规划模型基本原理
- PyODPS DataFrame:统一的数据查询语言
- 计算机原理转移指令题,转移指令计算机原理.pdf
- ngxin防止并发(白名单,前端有代理)
- 360能卸载oracle,如何完全卸载Oracle
- Phoenix官方教程 (一) 构建和运行
- 34.卷1(套接字联网API)---常用函数
- H.266/VVC代码学习:xCheckRDCostMerge2Nx2N函数
- 华为手机刷机后显示无服务器,华为手机刷机后,无法开机怎么办?
- Pandas实战-Series的方法
- 提升Hive操作Amazon S3读写数据的性能
- 辛甫生算法c语言,[转载]实变函数,计算方法程序,康托图
- 尚硅谷nginx笔记
- 新闻主题分类任务NLP
- C语言入门(1)——Hello World