IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> uniapp返回上一页,刷新列表 -> 正文阅读

[JavaScript知识库]uniapp返回上一页,刷新列表

因为我们做的项目是:前端 + Ios/Android 合作完成的App,那么在做消息通知时,进入消息详情,再返回列表,需要实时刷新列表,那么有的详情是跳转ios/Android的,并且返回头部是他们的。
(常用的返回方法:uni.navigateTo()、uni.redirectTo();如果这两种不管用时,可以用下面这种返回方法刷新列表

这时我遇到两个问题:
1.从详情,返回列表,没有刷新列表
解决方法:如果你的列表方法写到onLoad()中那么是不会刷新列表的;而是需要放到onShow()
2.因为列表是tab切换,直接在onShow中调列表方法是会出现列表数据push重复的问题的,
解决方法:所以需要page赋值1,列表数组置空。

代码如下,包括问题1的问题

onLoad(options) {//监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参)
	// let obj = JSON.parse(decodeURIComponent(options.obj)); //解析去掉/等符号,跳转接参
	// console.log(obj,'接参对象')
	// // this.token = obj.token,//请求头
	// this.getAllMessage()
},
onShow(){//监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
	this.page = 1
	this.messageList = []//数组   返回后再次进入页面,或者多次下拉刷新,page返回1页,数组置空,刷新列表实时显示红点
	this.getAllMessage()
},
//页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。
onReachBottom() {
	if(this.collectionTypeFlag == 0){
		if (this.loadingType == 1) {
			uni.stopPullDownRefresh()
		} else {
			this.page = this.page + 1
			this.getAllMessage()
		}
	}else if(this.collectionTypeFlag == 1){
		if (this.loadingType == 1) {
			uni.stopPullDownRefresh()
		} else {
			this.page = this.page + 1
			this.getAllMessage()
		}
	}	
},
methods: {
	//tab切换,下面这种方法,页数返回第一页,用onReachBottom方法(不推荐),tab切换时,tab下页面返回切换前页数
	collectionTypeActive(index) {
		this.collectionTypeFlag = index
		if(index==0){
			this.page = 1
			this.messageList = []//数组
			this.loadingType = 0
			this.getAllMessage()
		}else if(index==1){
			this.page = 1
			this.messageList = []//数组
			this.loadingType = 0
			this.getAllMessage()
		}
	},
}
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-02-26 11:22:00  更:2022-02-26 11:25:55 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 11:07:09-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码