从0到1之微信小程序快速入门(02)

目录

页面导航 - 声明式导航

1. 导航到 tabBar 页面

2. 导航到非 tabBar 页面

3. 后退导航

​编辑 页面导航 - 编程式导航

页面导航 - 导航传参 

页面事件 - 下拉刷新事件 

监听下拉刷新事件

停止下拉刷新的效果

页面事件 - 上拉触底事件

监听页面的上拉触底事件

 配置上拉触底距离

组件和页面的区别

组件样式隔离

​编辑 修改组件的隔离样式

styleIsolation可选值 

 数据监听器


页面导航 - 声明式导航

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,在实际开发中,可以根据自己的需求修改这个默认值。

组件和页面的区别

        从表面来看,组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是,组件和页面的 .js 与 .json 文件有明显的不同:

⚫ 组件的 .json 文件中需要声明 "component": true 属性

⚫ 组件的 .js 文件中调用的是 Component() 函数

⚫ 组件的事件处理函数需要定义到 methods 节点中

组件样式隔离

 修改组件的隔离样式

styleIsolation可选值 

默认是isolated

 数据监听器

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

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

相关文章

项目部署之OpenResty

项目部署之OpenResty 1. OpenResty介绍 OpenResty 是一个基于Nginx的高性能Web平台&#xff0c;用于方便地搭建能够处理超高并发、扩展性极高的动态Web应用、Web服务和动态网关。具备下列特点&#xff1a; 具备Nginx的完整功能基于Lua语言进行扩展&#xff0c;集成了大量精良…

cmake多目录构建初步成功

目录和代码和 首次cmake 多目录构建失败 此文一样&#xff1b; 只有一个CMakeLists.txt&#xff1b; cmake_minimum_required(VERSION 3.10) project(mytest3 VERSION 1.0) include_directories("${PROJECT_SOURCE_DIR}/include") add_executable(mytest3 src/main…

vue2:路由前置守卫无法获取到this.$store.state.xxx

在获取到vuex的数据时候&#xff0c;想在router目录下的index.js文件去获取到vuex仓库中声明的全局变量&#xff0c;但是通过this.$store.stote.xxx去获取的时候&#xff0c;报错提示&#xff1a;$store未定义 一、store/index.js const store new Vuex.Store({state: {// 属…

WPS中图的自动编号及引用

WPS中图的自动编号及引用 图的自动编号图编号的引用图编号及引用的更新 图的自动编号 将光标放置在需要插入编号的位置点击“引用”→“题注”&#xff1a; 点击“引用”→“题注”&#xff1a; 点击“编号”&#xff0c;设置图的编号格式&#xff0c;可勾选“包含章节编号”&…

铁轨(Rails, ACM/ICPC CERC 1997, UVa 514)rust解法

有一个火车站&#xff0c;铁轨铺设如图6-1所示。有n节车厢从A方向驶入车站&#xff0c;按进站顺序编号为1&#xff5e;n。你的任务是判断是否能让它们按照某种特定的顺序进入B方向的铁轨并驶出车站。例如&#xff0c;出栈顺序(5 4 1 2 3)是不可能的&#xff0c;但(5 4 3 2 1)是…

【错误解决方案】ModuleNotFoundError: No module named ‘xgboost‘

1. 错误提示 在尝试导入名为xgboost的模块时出现了ModuleNotFoundError。 错误提示&#xff1a;ModuleNotFoundError: No module named xgboost 这个错误通常意味着Python环境中没有安装你试图导入的模块。 2. 解决方案 安装xgboost模块即可解决上述问题。 可以通过Python…

对音频文件的处理:音频信息,读取内容,获取时长,切割音频,pcm与wav互转

音频处理发现的比较简单的代码&#xff0c;原作者代码在github&#xff1a;GitHub - silencesmile/python_wav: 对音频文件的处理&#xff1a;音频信息&#xff0c;读取内容&#xff0c;获取时长&#xff0c;切割音频&#xff0c;pcm与wav互转 可以按给定的开始和结束时间调用代…

软件安利——火绒安全

近年来&#xff0c;以优化、驱动、管理为目标所打造的软件屡见不鲜&#xff0c;大同小异的电脑管家相继走入了公众的视野。然而&#xff0c;在这日益急功近利的社会氛围驱动之下&#xff0c;真正坚持初心、优先考虑用户体验的电脑管家逐渐湮没在了浪潮之中。无论是鲁大师&#…

Dockerfile文件自动化生成R4L镜像

Dockerfile文件自动化生成R4L镜像的步骤 1、安装Docker&#xff1a;2、使用Dockerfile一键生成镜像&#xff1a;3、查看生成的Docker镜像&#xff1a;4、删除Docker镜像&#xff1a;5、生成Docker容器&#xff1a;6、查看容器7、删除容器 1、安装Docker&#xff1a; curl -fsS…

YOLOv5/YOLOv7改进: AIFI (尺度内特征交互)助力YOLO | YOLO终结者?RT-DETR一探究竟

💡💡💡本文全网首发独家改进: AIFI (尺度内特征交互)助力YOLO ,提升尺度内和尺度间特征交互能力,同时降低多个尺度的特征之间进行注意力运算,计算消耗较大等问题 推荐指数:五星 AIFI | 亲测在多个数据集能够实现涨点 💡💡💡Yolov5/Yolov7魔术师,独家首…

Py之optimum:optimum的简介、安装、使用方法之详细攻略

Py之optimum&#xff1a;optimum的简介、安装、使用方法之详细攻略 目录 optimum的简介 1、加速推理 Optimum 提供多种工具&#xff0c;用于在不同生态系统上导出和运行优化模型&#xff1a; 2、功能概述 optimum的安装 1、如果您想使用 Optimum 的加速器特定功能&#…

IOI车机系统刷机和改包笔记2 - 改包脚本

前言&#xff1a; 最近对雪佛兰改包需求感兴趣的网友很多&#xff0c;大家都遇上了很多奇怪的问题&#xff0c;这里就我自己使用的环境和脚本进行分享&#xff0c;供大家参考。 1. 准备环境 我这里使用Ubuntu系统进行操作 andyandy-vm:~$ sudo lsb_release -a No LSB module…

2023年CCF中国开源大会“大模型时代的智能化软件工程新范式”分论坛成功举行...

2023年CCF中国开源大会“大模型时代的智能化软件工程新范式”分论坛于10月21日在湖南长沙成功举行。本次论坛聚焦大模型时代的智能化软件新生态以及相应的软件工程新范式&#xff0c;邀请了多位来自学术界和工业界的专家进行分享和交流&#xff0c;共设置了5个主题报告和1个Pan…

设计师看后惊叹:当泥色走进室内空间的时候竟有此番效果

在美国的洛杉矶&#xff0c;一座引人注目的度假别墅彰显了自己的独特魅力。建筑师 Ron Radziner 说&#xff1a;“这是一座现代住宅&#xff0c;采用风化木、深色灰泥和绿色屋顶等与峡谷环境相关的材料&#xff0c;设计得通透、开放。” Zwickl 解释说&#xff1a;"他们想…

Git 入门指南:从新手到高手的完全指南

Git是一种强大的分布式版本控制系统&#xff0c;广泛应用于软件开发中。它的使用不仅可以帮助开发团队更好地管理代码&#xff0c;还可以提高团队协作效率和代码质量。随着软件开发的不断发展&#xff0c;版本控制成为了程序员必备的一项技能。 Git的基本概念 Git的基本概念对…

基因家族扩张与收缩分析-CAFE5

CAFE(Computational Analysis of gene Family Evolution)是一款以解释系统发育历史的方式分析基因家族大小变化的软件&#xff0c;这种分析常被称为基因家族收缩扩张(Gene family expansions and contractions)分析。 CAFE使用出生和死亡过程来模拟用户指定的系统发育树中的基…

在centos服务器中完成jdk,tomcat,MySQL的安装以及前后端分离项目中后端的部署

目录 一. jdk&#xff0c;tomcat的安装 1.将要安装的软件压缩包放入到centos服务器上 2. 解压对应的安装包 3. jdk环境变量配置 4. tomcat启动 5. 关闭防火墙 二. MySQL安装 1. 卸载mariadb&#xff0c;否则安装MySql会出现冲突(先查看后删除再查看) 2. 将MySQL安装包解…

数据结构Demo——简单计算器

简单计算器 一、项目介绍二、技术使用三、具体代码实现1.前端部分2.后端部分 一、项目介绍 本项目实现了一个通过网页访问的简单计算器&#xff0c;它可以对带括号的加减乘除表达式进行计算并将计算结果返回给用户&#xff0c;并且可以对用户输入的表达式进行合法性判断&#…

【小白的Spring源码手册】 Bean的扫描、装配和注册,面试学习可用

目录 前言源码学习Bean配置1. 注解2. xml配置 Bean扫描、装配、注册1. 扫描2. 装配BeanDefinition3. 校验BeanDefinition4. 注册BeanDefinition 总结 前言 如今Spring框架功能众多&#xff0c;每次打开Spring源码&#xff0c;要么就是自顶向下从整个框架来了解Spring整体流程&…

Servlet 初始化参数(web.xml和@WebServlet)

1、通过web.xml方式 <?xml version"1.0" encoding"UTF-8"?> <web-app xmlns"http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://xmlns.jcp.org/xm…