【Vue3】知识汇总,附详细定义和源码详解,后续出微信小程序项目(4)

====================
快速跳转:
我的个人博客主页👉:Reuuse博客
新开专栏👉:Vue3专栏
参考文献👉:uniapp官网
免费图标👉:阿里巴巴矢量图标库
❀ 感谢支持!☀
==================

前情提要

🔺因为最近学习的vue语言,发现有很多细节的碎块需要汇总,所以就有了本次系列的开始。❀❀❀
⭐总结的知识会包含总结定义,和源代码解析,可以当作类似于英语单词一样瞄几眼,大概知道即可
那么话不多说我们开始吧在这里插入图片描述


vue

  • 前情提要
  • showActionSheet从底部向上弹出操作菜单
  • setTabBar设置TabBar和下拉刷新API
    • uni.setTabBarBadge(OBJECT)
    • uni.setTabBarItem
    • uni.enablePullDownRefresh
  • 页面和路由API-navigateTo及页面栈getCurrentPages
    • navigateTo & reLaunch
    • getCurrentPages
  • StorageSync数据缓存API
    • uni.setStorage(OBJECT)
    • uni.getStorage(OBJECT)

showActionSheet从底部向上弹出操作菜单

let arrs = ["高中","大专","本科","研究生"];
function select(){uni.showActionSheet({title:"请选择",itemList: arrs,success:res=>{console.log(res);console.log(arrs[res.tapIndex]);}})
}

在这里插入图片描述

showActionSheet从底部向上弹出操作菜单,涉及到的知识点主要有:

  1. UIAlertController: 这是iOS中用于显示警告框和操作菜单的类。
  2. UIAlertAction: 这是UIAlertController中的按钮,可以响应用户的操作。
  3. UIViewController: 这是iOS中的视图控制器,负责管理视图的生命周期。

以下是一个简单的示例代码,展示了如何使用showActionSheet从底部向上弹出操作菜单:

import UIKitclass ViewController: UIViewController {override func viewDidLoad() {super.viewDidLoad()let actionSheet = UIAlertController(title: "选择操作", message: nil, preferredStyle: .actionSheet)let cancelAction = UIAlertAction(title: "取消", style: .cancel, handler: nil)let deleteAction = UIAlertAction(title: "删除", style: .destructive, handler: { (action) inprint("执行了删除操作")})let shareAction = UIAlertAction(title: "分享", style: .default, handler: { (action) inprint("执行了分享操作")})actionSheet.addAction(deleteAction)actionSheet.addAction(shareAction)actionSheet.addAction(cancelAction)self.present(actionSheet, animated: true, completion: nil)}
}

在这个示例中,我们创建了一个UIAlertController实例,并设置了它的样式为.actionSheet。然后,我们添加了三个UIAlertAction实例,分别对应“取消”、“删除”和“分享”操作。最后,我们使用self.present方法将操作菜单显示出来。


setTabBar设置TabBar和下拉刷新API

  1. setTabBar

    • 定义与用途setTabBar用于在小程序中自定义底部或顶部的导航栏,实现页面间的快速切换。
    • 实现方法:通过在app.json文件中配置tabBar节点来实现。需要指定list数组,包含最少2个、最多5个tab项,每个项包括pagePath(页面路径)和text(按钮文字)等属性。
    • 相关知识点:了解tabBar的基本属性,如backgroundColor(背景色)、selectedIconPath(选中时的图片路径)、iconPath(未选中时的图片路径)等。注意,当设置为顶部tabBar时,不会显示icon。
  2. 下拉刷新API

    • 定义与用途:下拉刷新是用户通过在屏幕上向下滑动来触发页面数据更新的功能。
    • 实现方法:在pages.jsonglobalStyle中启用下拉刷新功能,设置"enablePullDownRefresh": true即可。需要在页面的onPullDownRefresh生命周期函数中编写具体的刷新逻辑。
    • 相关知识点:了解如何在页面加载时显示加载动画,并在数据加载完成后隐藏动画和停止下拉刷新。注意处理自定义tabBar与下拉刷新功能的兼容性问题,可能需要在特定生命周期函数中手动添加下拉刷新方法。

一般情况下,会放到App.vue里面,当项目启动的时候,就会先启动这里,全局启动
在这里插入图片描述

uni.setTabBarBadge(OBJECT)

为tabBar某一项的右上角添加文本

uni.setTabBarBadge({index: 1,text:"3",//显示右上角信息
})

uni.setTabBarItem

改变底部导航的分类题目

uni.setTabBarItem({index: 1,text:"自定义",})

uni.enablePullDownRefresh

下拉刷新

"pages": [ //pages数组中第一项表示应用启动页{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app","enablePullDownRefresh": true}},

页面和路由API-navigateTo及页面栈getCurrentPages

navigateTo & reLaunch

navigateTo 和 reLaunch 是两个在小程序或网页开发中常用的导航方法,它们的主要区别在于页面栈处理、使用场景以及参数传递等方面。以下是具体分析:

  1. 页面栈处理

    • navigateTo:使用 navigateTo 进行跳转时,新的页面会被压入页面栈。这意味着用户可以通过导航返回到之前的页面。
    • reLaunch:reLaunch 会关闭所有页面,并打开到应用内的某个页面。这通常用于需要重新加载整个应用的场景,例如用户登录后重定向到主页。
  2. 使用场景

    • navigateTo:适用于需要在当前页面基础上打开新页面的场景。例如,从商品列表页进入商品详情页,或者从首页进入个人中心页等。
    • reLaunch:适用于需要完全重置应用状态的场景。例如,用户登出后返回到登录页,或者在某些情况下需要清除所有页面状态并重新开始。
  3. 参数传递

    • navigateTo:可以传递 URL 参数,这些参数可以是查询字符串的形式,也可以是通过 eventChannel 传递复杂对象。
    • reLaunch:同样可以传递 URL 参数,但需要注意的是,reLaunch 会关闭所有页面,因此传递的参数将用于初始化新的页面栈。
  4. 生命周期影响

    • navigateTo:触发 onLoad、onShow 等页面生命周期函数。
    • reLaunch:由于会关闭所有页面,因此只会触发目标页面的 onLoad 生命周期函数。

总的来说,navigateTo 更适合于在现有页面栈上添加新页面,而 reLaunch 则适合于需要完全重置页面栈的场景。根据具体的应用场景选择合适的方法,可以更好地控制页面导航和用户体验。

getCurrentPages

页面栈指的是小程序中页面的访问顺序,它记录了用户从打开小程序开始所访问过的所有页面。这个API可以返回一个数组,数组中的每个元素代表一个页面,数组的第一个元素是最早打开的页面,最后一个元素是当前页面。

例如,如果用户依次打开了A、B、C三个页面,那么调用getCurrentPages()将返回一个包含三个元素的数组,其中第一个元素代表A页面,第二个元素代表B页面,第三个元素代表C页面。

StorageSync数据缓存API

uni.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。

uni.setStorage({key: 'storage_key',data: 'hello',success: function () {console.log('success');}
});

uni.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

uni.getStorage({key: 'storage_key',success: function (res) {console.log(res.data);}
});

🌼那么今天就到这里吧!
▲这次的知识汇总框架只是一次尝试,后续会陆续跟新vue系列。再后来会逐渐成熟,向大家展现更简洁明了的知识汇总!

一个小小的赞是对我最大的鼓励!
感谢你们看到这里,下次见~
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/13654.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

微信小程序_小程序视图与逻辑_day3

一、目标 A. 能够知道如何实现页面之间的导航跳转 B. 能够知道如何实现下拉刷新效果 C. 能够知道如何实现上拉加载更多效果 D. 能够知道小程序中常用的生命周期 二、目录 A. 页面导航 B. 页面事件 C. 生命周期 D. WXS脚本 E. 案例-本地生活(列表页面)…

springboot社团服务系统的设计与实现,计算机毕业设计项目源码316,计算机毕设程序(LW+开题报告、中期报告、任务书等全套方案)

摘 要 社会发展日新月异,用计算机应用实现数据管理功能已经算是很完善的了,但是随着移动互联网的到来,处理信息不再受制于地理位置的限制,处理信息及时高效,备受人们的喜爱。本次开发一套社团服务系统有管理员&#x…

Linux服务管理-kerberos

Kerberos 官网文档‘:Kerberos:网络身份验证协议 (mit.edu) 基本概念:Kerberos基本概念及原理汇总-腾讯云开发者社区-腾讯云 (tencent.com) kerberos概述 Kerberos是一种计算机网络认证协议,由麻省理工学院(MIT&#x…

区块链技术在游戏行业的应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 区块链技术在游戏行业的应用 区块链技术在游戏行业的应用 区块链技术在游戏行业的应用 引言 区块链技术概述 定义与原理 发展历程…

MooseFS (MFS) 分布式对象存储

一、MFS 优越特性 Free (GPL): 通用文件系统,开源免费。在线扩容: 体系架构具有极强的可伸缩性,支持在线扩容。部署简单。高可用性: 支持设置任意文件冗余(数据分区)程度,提供比RAID10更高的冗余级别,同时不会影响读写性能&#…

【常见问题解答】远程桌面无法复制粘贴的解决方法

提示:文中提出了“远程桌面无法复制粘贴文件到本地”问题的三种解决方法,其中“方法 3:重启 RDP 剪贴板监视程序”亲测有效。 目录 一、问题描述二、解决方法1.方法1:设置远程桌面连接(1)打开远程桌面连接,点击【显示选项】(2)勾选“剪贴板”,并点击【详细信息】(3)…

探索光耦:达林顿光耦的特点与应用

在现代电子设备中,光耦作为信号隔离和传输的核心元件之一,扮演着至关重要的角色。达林顿光耦凭借其独特的电流放大能力和可靠性,在众多应用中脱颖而出。本文将探讨达林顿光耦的特点及其广泛的应用。 达林顿光耦的主要特点 高电流放大倍数&a…

河南省的一级科技查新机构有哪些?

科技查新,简称查新,是指权威机构对查新项目的新颖性作出文献评价的情报咨询服务。这一服务在科研立项、成果鉴定、项目申报等方面发挥着至关重要的作用。河南省作为中国的重要科技和教育基地,拥有多个一级科技查新机构,为本省及全…

数据结构 ——— 层序遍历链式二叉树

目录 链式二叉树示意图​编辑 何为层序遍历 手搓一个链式二叉树 实现层序遍历链式二叉树 链式二叉树示意图 何为层序遍历 和前中后序遍历不同,前中后序遍历链式二叉树需要利用递归才能遍历 而层序遍历是非递归的形式,如上图:层序遍历的…

【故障解决】麒麟系统右下角网络图标取消显示叹号

原文链接:【故障解决】麒麟系统右下角网络图标取消显示叹号 Hello,大家好啊!今天给大家带来一篇关于如何在麒麟系统中解决网络图标出现感叹号问题的文章。在日常使用麒麟系统的过程中,我们在内网或公网环境下,有时会遇…

Spring boot 集成 nacos、redis、mysql

1,准备好nacos环境,准备ncc.yml配置: 在配置添加 test: haha 2,添加依赖 在pom.xml 文件中添加Nacos 客户端的依赖,样例使用Spring Cloud Alibaba 版本使用2023.x 分支,详情可查看 版本发布说明-阿里云S…

力扣 LeetCode 206. 反转链表(Day2:链表)

解题思路: pre ,cur双指针 需要通过tmp暂存cur的下一个位置,以方便cur的下一步移动 class Solution {public ListNode reverseList(ListNode head) {ListNode pre null;ListNode cur head;while (cur ! null) {ListNode tmp cur.next;c…

golang 实现比特币内核:公钥的 SEC 编码格式详解

比特币作为区块链的一个应用,它建立在分布式系统之上,‘节点’遍布全球。为了使所有节点协同工作并作为一个整体系统运行,需要保持所有节点同步在相同的状态中,也就是说节点之间需要频繁通信,并且相互交换大量数据消息。这要求在网络上传输的消息或数据要使用某种格式编码…

v-html 富文本中图片使用element-ui image-viewer组件实现预览,并且阻止滚动条

效果 导入组件 import ElImageViewer from "element-ui/packages/image/src/image-viewer"; components:{ ElImageViewer },模板使用组件 <el-image-viewerv-if"isShowPics":on-close"closeViewer":url-list"srcList"/>定义两…

Redhat7.9 安装 KingbaseES 金仓数据库 V9单机版(图形化安装)

Redhat7.9 安装 KingbaseES 金仓数据库 V9单机版 ——图形化安装 一、安装前规划1.1 安装包下载1.2 环境信息 二、操作系统配置2.1 检查操作系统和内存2.2 关闭防火墙和selinux2.3 配置内核参数(/etc/sysctl.conf)2.4 配置资源使用参数(/etc/security/limits.conf)2.5 配置Remo…

【Linux】进程状态的优先级

大家好呀&#xff0c;我是残念&#xff0c;希望在你看完之后&#xff0c;能对你有所帮助&#xff0c;有什么不足请指正&#xff01;共同学习交流哦 本文由&#xff1a;残念ing原创CSDN首发&#xff0c;如需要转载请通知 个人主页&#xff1a;残念ing-CSDN博客&#xff0c;欢迎各…

【Linux:IO多路复用(select函数)

什么是IO多路复用&#xff1f; 一种网络通信的手段&#xff0c;IO多路复用可以同时监测多个文件描述符&#xff0c;且这个过程是阻塞的&#xff0c;当检测有文件描述符就绪&#xff0c;程序的阻塞就会解除&#xff0c;就可以通过这些就绪的文件描述符进行通信。通过这种方式在…

软件工程笔记二—— 软件生存期模型

目录 瀑布模型 瀑布模型的特点 阶段间具有顺序性和依赖性。 推迟实现的观点 质量保证的观点 瀑布模型的优点 瀑布模型的缺点 快速原型模型 快速原型模型的优点 快速原型模型的缺点 增量模型 增量模型的优点 增量构件开发 螺旋模型 完整的螺旋模型&#xff08;顺…

视频孪生技术在金融银行网点场景中的应用价值

作为国民经济重要的基础行业&#xff0c;金融行业在高速发展的同时衍生出业务纠纷、安全防范、职能管理等诸多问题&#xff0c;对安全防范和监督管理提出了更高的要求。因此&#xff0c;如何能更好的利用视频监控系统价值&#xff0c;让管理人员更简便的浏览监控视频、更快速的…

【金融风控】特征评估与筛选详解

内容介绍 掌握单特征分析的衡量指标 知道 IV&#xff0c;PSI等指标含义 知道多特征筛选的常用方法 掌握Boruta,VIF,RFE,L1等特征筛选的使用方法 【理解】单特征分析 什么是好特征 从几个角度衡量&#xff1a;覆盖度&#xff0c;区分度&#xff0c;相关性&#xff0c;稳定…