2024.2.7日总结(小程序开发4)

页面导航

页面导航是页面之间的相互跳转:

  • <a>链接
  • location.href

小程序中实现页面导航的两种方式:

声明式导航

  • 在页面上声明一个<navigator>导航组件
  • 通过点击<navigator>组件实现页面跳转

编程式导航

  • 调用小程序的导航API,实现页面跳转

声明式导航

导航到tabBar页面

tabBar页面指的是被配置为tabBar的页面。

在使用<navigator>组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性

  • url表示要跳转的页面的地址,必须以/开头
  • open-type表示跳转的方式,必须为switchTab
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
导航到非tabBar页面

非tabBar页面指的是没以后被配置为tabBar的页面

在使用<navigator>组件跳转时,需要指定url属性和open-type属性:

  • url表示要跳转的页面的地址,必须以/开头
  • open-type表示跳转的方式,必须为navigate(可省略)
后退导航

如果要后退到上一页面或多级页面,则需要指定open-type属性和delta属性

  • open-type的值必须是navigateBack,表示要进行后退导航
  • delta的值是数字,表示要后退的层级

编程式导航

导航到tabBar页面

调用wx.switchTab(Object object)方法,可以跳转到tabBar页面,其中Object参数对象的属性列表如下:

导航到非tabBar页面

调用wx.navigateTo(Object object)方法,可以跳转到非tabBar的页面,其中Object参数对象的属性列表如下:

后退导航

调用wx.navigateBack(Object object)方法,可以返回上一页面或多级页面。其中Object参数对象可选的属性列表如下:

导航传参

声明式

navigator组件的url属性用来指定要跳转到的页面的路径,路径后面还可以携带参数:

  • 参数与路径之间使用?分隔
  • 参数键与参数值用=连接
  • 不同参数用&分隔
编程式

调用wx.navigateTo(Object object)方法跳转页面时,也可以携带参数。

在onLoad中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数,可以直接在onLoad事件中获取到

页面事件                                                   

下拉刷新事件                                                              

下拉滑动,重新加载页面数据

启用下拉刷新

全局开启下拉刷新

  • 在app.json的window节点中,将enablePullDownRefresh设置为true

局部开启下拉刷新

  • 在页面的.json配置文件中,将enablePullDownRefresh设置为true
配置下拉刷新窗口样式

在全局或页面的.json配置文件中,通过backgroundColor和backgroudTextStyle来配置下拉窗口的样式

  • backgroundColor来配置下拉刷新窗口的背景颜色(十六进制颜色值)
  • backgroundTextColor用来配置下拉刷新loading的样式,仅支持dark和light
监听页面的下拉刷新事件

在页面的.js文件中,通过onPullDownTefresh()函数即可监听当前页面的下拉刷新事件

停止下拉刷新效果

处理完下拉刷新后,loading效果不会主动消失,此时可以调用wx.stopPullDownTefresh()可以停止当前页面的下拉刷新。

上拉触底事件

通过上拉滑动,从而加载更多数据的行为

监听页面的上拉触底 事件

在页面的.js文件中,通过onReachBottom()函数即可监听当前页面的上拉触底时间

配置上拉触底距离

滚动条距离页面底部的距离

可以在全局或页面的.json配置文件中,通过onReachBottomDistance属性来配置上拉触底的距离

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[C#] 如何使用ScottPlot.WPF在WPF桌面程序中绘制图表

什么是ScottPlot.WPF&#xff1f; ScottPlot.WPF 是一个开源的数据可视化库&#xff0c;用于在 WPF 应用程序中创建高品质的绘图和图表。它是基于 ScottPlot 库的 WPF 版本&#xff0c;提供了简单易用的 API&#xff0c;使开发人员能够通过简单的代码创建各种类型的图表&#…

极值图论基础

目录 一&#xff0c;普通子图禁图 二&#xff0c;Turan问题 三&#xff0c;Turan定理、Turan图 1&#xff0c;Turan定理 2&#xff0c;Turan图 四&#xff0c;以完全二部图为禁图的Turan问题 1&#xff0c;最大边数的上界 2&#xff0c;最大边数的下界 五&#xff0c;…

CentOS7集群配置免密登录

准备工作 提前开启三台虚拟机hadoop102、hadoop103,hadoop104,关于三台虚拟机的安装可以参考&#xff1a;https://mp.csdn.net/mp_blog/creation/editor/136010108 配置免密登录 一、分别修改三台机器的hosts,配置主机映射关系 vim /etc/hosts 文件中输入以下内容&#xf…

Web 目录爆破神器:Dirb 保姆级教程(附链接)

一、介绍 dirb 是一款用于目录爆破的开源工具&#xff0c;旨在帮助渗透测试人员和安全研究人员发现目标网站上的隐藏目录和文件。它使用字典文件中的单词来构建 URL 路径&#xff0c;然后发送 HTTP 请求来检查这些路径是否存在。 以下是 dirb 工具的一些特点和基本用法&#…

leetcode206反转链表|详细算法讲解学习

题目 https://leetcode.cn/problems/reverse-linked-list/ 这道题对于刚开始学习数据结构和算法的人来说有点难&#xff0c;是入门的重要典型题目&#xff1b;但等数据结构入门之后&#xff0c;这就会是一道非常简单的题目了。 算法一&#xff08;算法正确但超出时间限制&am…

SQL在云计算中的新角色:重新定义数据分析

文章目录 1. 云计算与数据分析的融合2. SQL在云计算中的新角色3. 分布式SQL查询引擎4. SQL-on-Hadoop解决方案5. SQL与其他数据分析工具的集成6. 实时数据分析与SQL7. SQL在云数据仓库中的角色8. 安全性与隐私保护9. SQL的未来展望《SQL数据分析实战&#xff08;第2版&#xff…

python创建udf函数步骤

一、目标 实现一个函数&#xff0c;传入两个datetime类型的参数&#xff0c;返回double类型的工作日天数 二、思路 如何计算差值&#xff1f; 如果开始时间和结束时间在同一天&#xff1a;实现同 datediff(end, start, ‘ss’) / 86400.0 如果开始时间和结束时间在不同天&am…

通过docker-compose部署NGINX服务,并使该服务开机自启

要在通过docker-compose部署的NGINX服务实现开机自启&#xff0c;你需要确保Docker守护进程在系统启动时自动运行&#xff0c;并配置docker-compose.yml文件以在容器中运行NGINX服务。以下是步骤&#xff1a; 确保Docker守护进程开机启动&#xff1a; 在Ubuntu/Debian上&#x…

服务器安装Docker (ubuntu)

前几天因为工作需求&#xff0c;要在服务器上安装Docker&#xff0c;现在把这个过程记录下来 步骤 1&#xff1a;更新软件包索引 打开终端并执行以下命令来更新包索引&#xff1a; sudo apt-get update步骤 2&#xff1a;安装必要的包 安装一些允许apt通过HTTPS使用仓库的包…

HACKTHEBOX通关笔记——mango(退役)

信息收集 端口扫描 ┌──(root㉿kali)-[~] └─# nmap -sC -sV -A -p- --min-rate10000 10.129.229.185 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-01-31 20:44 EST Warning: 10.129.229.185 giving up on port because retransmission cap hit (10). Nmap scan …

开关电源用什么电感

开关电源用什么电感 电感波形图 我们看图&#xff0c;如下图所示&#xff1a; 图1 电感波形示意图 PWM那张图和inductor那张图&#xff0c;第一张图就是Buck电路图SW引脚的波形&#xff0c;看波形我们知道在t1的时候是vi在t2的时候是0&#xff0c;紧接着电流和电压经过电感以…

【Godot4.2】文件系统自定义控件 - FileSystemTree

FileSystemTree B站【Godot4.2】文件系统自定义节点 - FileSystemTree 概述 在Godot设计编辑器插件或应用程序时&#xff0c;可能需要涉及文件系统的显示&#xff0c;比如文件夹或文件的树形列表。 我们可以用Godot的Tree控件快速书写相应的功能&#xff0c;但是为了复用到…