微信小程序学习(02)

页面导航 - 声明式导航

1. 导航到 tabBar 页面

        tabBar 页面指的是被配置为 tabBar 的页面。 在使用<navigator> 组件跳转到指定的 tabBar 页面时,需要指定 url 属性和 open-type 属性,其中:

⚫ url 表示要跳转的页面的地址,必须以 / 开头;

⚫ open-type 表示跳转的方式,必须为 switchTab

2. 导航到非 tabBar 页面

        非 tabBar 页面指的是没有被配置为 tabBar 的页面。 在使用 <navigator> 组件跳转到普通的非 tabBar 页面时,则需要指定 url 属性和 open-type 属性,其中:

⚫ url 表示要跳转的页面的地址,必须以 / 开头;

⚫ open-type 表示跳转的方式,必须为 navigate  

注意:为了简便,在导航到非 tabBar 页面时,open-type="navigate" 属性可以省略。

3. 后退导航

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

⚫ open-type 的值必须是 navigateBack,表示要进行后退导航;

⚫ delta 的值必须是数字,表示要后退的层 

注意:为了简便,如果只是后退到上一页面,则可以省略 delta 属性,因为其默认值就是 1

 页面导航 - 编程式导航

页面导航 - 导航传参 

 

页面事件 - 下拉刷新事件 

        下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为

启用下拉刷新有两种方式:

① 全局开启下拉刷新 ⚫ 在 app.json 的 window 节点中,将 enablePullDownRefresh 设置为 true ② 局部开启下拉刷新 ⚫ 在页面的 .json 配置文件中,将 enablePullDownRefresh 设置为 true

在实际开发中,推荐使用第 2 种方式,为需要的页面单独开启下拉刷新的效

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

⚫ backgroundColor 用来配置下拉刷新窗口的背景颜色,仅支持16 进制的颜色值

⚫ backgroundTextStyle 用来配置下拉刷新 loading 的样式,仅支持 dark 和 light

监听下拉刷新事件

在页面的 .js 文件中,通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。 例如,在页面的 wxml 中有如下的 UI 结构,点击按钮可以让 count 值自增 +1

 

停止下拉刷新的效果

        当处理完下拉刷新后,下拉刷新的 loading 效果会一直显示,不会主动消失,所以需要手动隐藏下拉刷新的 loading 效果。此时,调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。示例代码如下 :

 onPullDownRefresh: function () {
      console.log("下拉刷新");
      this.setData({
        count: 0
      })
      wx.stopPullDownRefresh()
  },

页面事件 - 上拉触底事件

        上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。 

监听页面的上拉触底事件

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

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
      console.log("上拉触底说的");
  },

 配置上拉触底距离

        上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离。 可以在全局或页面的 .json 配置文件中,通过 onReachBottomDistance 属性来配置上拉触底的距离。 小程序默认的触底距离是 50px,在实际开发中,可以根据自己的需求修改这个默认值。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

TX Text Control.NET For WPF 32.0 Crack

TX Text Control 支持VISUAL STUDIO 2022、.NET 5 和 .NET 6 支持 .NET WPF 应用程序的文档处理 将文档编辑、创建和 PDF 生成添加到您的 WPF 应用程序中。 视窗用户界面 功能齐全的文档编辑器 TX Text Control 是一款完全可编程的丰富编辑控件&#xff0c;它在专为 Visual Stu…

TensorFlow2从磁盘读取图片数据集的示例(tf.keras.utils.image_dataset_from_directory)

import os import warnings warnings.filterwarnings("ignore") import tensorflow as tf from tensorflow.keras.optimizers import Adam from tensorflow.keras.applications.resnet import ResNet50#数据所在文件夹 base_dir ./data/cats_and_dogs train_dir os…

ES 数据迁移最佳实践

ES 数据迁移最佳实践与讲解 数据迁移是 Elasticsearch 运维管理和业务需求中常见的操作之一。以下是不同数据迁移方法的最佳实践和讲解&#xff1a; 一、数据迁移需求梳理 二、数据迁移方法梳理 三、各方案对比 方案 优点 缺点&#xff08;限制&#xff09; 适用场景 是否有…

基于VUE3+Layui从头搭建通用后台管理系统(前端篇)十三:通用表格组件封装实现

一、本章内容 本章实现通用表格组件,根据实体配置自动实现表格列识别、数据搜索、表格排序、添加、编辑、删除等操作功能。 1. 详细课程地址: 待发布 2. 源码下载地址: 待发布 二、界面预览 三、开发视频 3.1 B站视频地址:

Linux中的开发工具(yum,vim,gcc/g++,gdb,Makefile,git)

文章目录 1. Linux软件包管理器——yumyum 语法yum 常用命令安装 yum 仓库源 2. Linux编辑器——vimvim 的五种常用模式模式切换vim 基本操作命令模式命令集&#xff08;1&#xff09;光标命令&#xff08;2&#xff09;复制粘贴命令&#xff08;3&#xff09;撤销与重做&#…

app分发的一些流程2

应用分发的流程通常包括以下步骤&#xff1a; 开发应用程序&#xff1a;首先&#xff0c;您需要开发您的应用程序。这包括编写代码、设计用户界面、测试应用程序等等。确保您的应用程序符合各个应用商店的规范和要求&#xff0c;以确保顺利通过审核。 准备应用材料&#xff1…

Json数据上传—>对象转换—>存入MongoDB(SpringData提供的规范)

上传json 代码实现 RestController RequestMapping("/api/hosp") public class ApiController{Autowiredprivate HospitalService hospitalService;PostMapping("saveHospital")public Result saveHosp(HttpServletRequest request){Map<String,String…

基于html5+javascript技术开发的房贷利率计算器

房贷计算器是一款专为购房者设计的实用工具应用&#xff0c;其主要功能是帮助用户详细计算房贷的还款金额、利息以及还款计划等。通过这款软件&#xff0c;用户可以更加便捷地了解到自己的还款情况和计划&#xff0c;从而更好地规划自己的财务。下面将对房贷计算器进行详细的介…

k8s-----25、资源调度-ResourceQuota资源配额、资源限制limitrange、服务质量QoS

1、ResourceQuota资源配额 1.0 作用 命名空间资源配额。防止公司内部人员对资源的不合理利用。 1.1、为什么需要资源配额 1、作为k8s集群的管理员&#xff0c;知道集群的规模&#xff0c;会合理规划资源&#xff0c;但是使用侧不知道&#xff0c;会导致很多不合理的使用场景…

一、W5100S/W5500+RP2040树莓派Pico<静态配置网络信息>

文章目录 1. 前言2. 相关网络信息2.1 简介2.2 优点2.3 应用 3. WIZnet以太网芯片4. 静态IP网络设置示例讲解以及使用4.1 程序流程图4.2 测试准备4.3 连接方式4.4 相关代码4.5 编译烧录 5. 注意事项6. 相关链接 1. 前言 从本章开始我们将用WIZnet的W5100S/W5500以太网芯片结合RP…

回归预测 | MATLAB实现BO-LSTM贝叶斯优化长短期神经网络多输入单输出回归预测

回归预测 | MATLAB实现BO-LSTM贝叶斯优化长短期神经网络多输入单输出回归预测 目录 回归预测 | MATLAB实现BO-LSTM贝叶斯优化长短期神经网络多输入单输出回归预测效果一览基本介绍模型搭建程序设计参考资料 效果一览 基本介绍 MATLAB实现BO-LSTM贝叶斯优化长短期神经网络多输入…

科大讯飞发布讯飞星火 3.0;开源AI的现状

&#x1f680; 科大讯飞发布讯飞星火 3.0&#xff0c;综合能力超越ChatGPT&#xff08;非GPT-4版&#xff09; 摘要&#xff1a;科大讯飞在2023全球1024开发者节上宣布讯飞星火 3.0正式发布&#xff0c;号称综合能力已超越ChatGPT。据介绍&#xff0c;星火认知大模型 V3.0在文…

Redis桌面管理工具:Redis Desktop Manager for Mac

Redis Desktop Manager是一款非常实用的Redis管理工具&#xff0c;它不仅提供了方便易用的图形用户界面&#xff0c;还支持多种Redis数据结构&#xff0c;可以帮助用户轻松地完成Redis数据库的管理工作。 以下是一些推荐Redis Desktop Manager的理由&#xff1a; 多平台支持&a…

实现地址转换的硬件机构

一、基本地址变换机构 1.硬件&#xff1a; 设置一个页表寄存器&#xff0c;存放页表在内存中的起始地址与页表长度。 2.执行过程&#xff1a; 进程未执行时&#xff0c;页表起始地址和长度存放在进程控制块(PCB)中;进程被调度时&#xff0c;OS内核会将其放入页表寄存器中。 3.具…

vue3+vite在线预览pdf

效果图 代码 <template><div class"pdf-preview"><div class"pdf-wrap"><vue-pdf-embed :source"state.source" :style"scale" class"vue-pdf-embed" :page"state.pageNum" /></div…

c#使用ExifLib库提取图像的相机型号、光圈、快门、iso、曝光时间、焦距信息等EXIF信息

近期公司组织了书画摄影比赛&#xff0c;本人作为摄影爱好者&#xff0c;平时也会拍些照片&#xff0c;这次比赛当然不能错过。为了提高获奖概率&#xff0c;选了19张图像作为参赛作品。但是&#xff0c;摄影作品要提交图像的光圈、曝光时间等参数。一两张还可以通过电脑自带软…

中国大模型开源创新与合作的新篇章 | 2023 CCF中国开源大会

2023年10月21日至22日&#xff0c;由中国计算机学会&#xff08;CCF&#xff09;和开放原子开源基金会联合主办的CCF中国开源大会&#xff08;CCF ChinaOSC&#xff09;在湖南省长沙市北辰国际会议中心成功召开。此次大会以“开源联合&#xff0c;聚力共赢”为主题&#xff0c;…

身份证号码,格式校验:@IdCard(Validation + Hutool)

目标 自定义一个用于校验 身份证号码 格式的注解IdCard&#xff0c;能够和现有的 Validation 兼容&#xff0c;使用方式和其他校验注解保持一致&#xff08;使用 Valid 注解接口参数&#xff09;。 校验逻辑 有效格式 符合国家标准。 公民身份号码按照GB11643&#xff0d;…

Gdb调试

1 概述 当程序运行时出现问题时&#xff0c;通过GDB调试可以快速找到问题点&#xff0c;当然不是所有问题都能通过调试找到问题点。 在GCC编译程序时&#xff0c;需要加 -g参数&#xff0c;可以通过在-g选项后附加数字1、2或3来指定在代码中加入调试信息的多少。默认的级别是2…

人工智能基础_机器学习001_线性回归_多元线性回归_最优解_基本概念_有监督机器学习_jupyter notebook---人工智能工作笔记0040

线性和回归,就是自然规律,比如人类是身高趋于某个值的概率最大,回归就是通过数学方法找到事物的规律. 机器学习作用: 该专业实际应用于机器视觉、指纹识别、人脸识别、视网膜识别、虹膜识别、掌纹识别、专家系统、自动规划、智能搜索、定理证明、博弈、自动程序设计、智能控制…