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

news2025/2/26 8:30:15

目录

页面导航 - 声明式导航

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.coloradmin.cn/o/1148387.html

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

相关文章

python实战项目基于Django的高校大学生宿舍管理系统 寝室维修保修管理系统(源码调试 开题报告lw ppt)

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人七年开发经验&#xff0c;擅长Java、Python、PHP、.NET、微信小程序、爬虫、大数据等&#xff0c;大家有这一块的问题可以一起交流&#xff01; &#x1f495;&…

基于 Servlet+jsp+mysql 开发 javaWeb 学生宿舍管理系统+论文

项目描述&#xff1a; 本系统旨在为宿舍管理人及其用户提供一个 功能齐全、使用方便的管理系统&#xff0c;以代替现有人 工管理方法&#xff0c;采用Bootstrap框架结合MySQL 数据库。 系统的主要用户分为系统管理员、宿舍管理人员和学生用户。宿舍网站管理系统主要实现了对学校…

前端 :用HTML ,JS写一个 双色球彩票中将机制,因为时间不够,加上本人懒没有用CSS美化界面,多包涵

1.HTML <body><div id"content"><div id "top"><div id "username">用户号码&#xff1a;</div><div id "qiu"><span id "red">红球&#xff1a;</span><input id…

一体化模型图像去雨+图像去噪+图像去模糊(图像处理-图像复原-代码+部署运行教程)

本文主要讲述了一体化模型进行去噪、去雨、去模糊&#xff0c;也就是说&#xff0c;一个模型就可以完成上述三个任务。实现了良好的图像复原功能&#xff01; 先来看一下美女复原.jpg 具体的&#xff1a; 在图像恢复任务中&#xff0c;需要在恢复图像的过程中保持空间细节…

基于深度学习的安全帽识别检测系统(python OpenCV yolov5)

收藏和点赞&#xff0c;您的关注是我创作的动力 文章目录 概要 一、研究的内容与方法二、基于深度学习的安全帽识别算法2.1 深度学习2.2 算法流程2.3 目标检测算法2.3.1 Faster R-CNN2.3.2 SSD2.3.3 YOLO v3 三 实验与结果分析3.1 实验数据集3.1.1 实验数据集的构建3.1.2 数据…

大数据-Storm流式框架(八)---Storm案例

中国移动项目部署文档 一、项目架构 二、启动集群 1、启动Zookeeper集群 2、启动Hbase&#xff08;完全分布式需要先启动Hadoop集群&#xff09; 在conf/hbase-env.sh中设置JAVA_HOME 在conf/hbase-site.xml中&#xff0c;仅需要指定hbase和zookeeper写数据的本地路径。默…

【Python学习】—Python基础语法(七)

一、异常 当检测到一个错误时&#xff0c;Python解释器无法继续执行&#xff0c;反而出现一些提示错误。 基本语法&#xff1a; try:可能发生的错误 except:如果出现异常执行的代码二、异常的传递 三、模块 import time print("你好") time.sleep(5) print("…

知识管理的PSCA循环

前言&#xff1a;在PMP备考第二章《环境》部分&#xff0c;面对项目的复杂性&#xff0c;提到了知识管理的PSDA循环&#xff0c;本篇博客主要谈一下什么是PSDA循环&#xff0c;以及我们面对复杂的环境&#xff0c;如何提升自己的学习能力和认知水平。 目录 知识的冰山模型 P…

我的架构复盘

1、背景 我目前公司研发中心担任软件研发负责人&#xff0c;研发中心分为3组&#xff0c;总共有30多人。研发中心主要开发各类生产辅助工具&#xff0c;比如巡检、安全教育等系统。系统不对外&#xff0c;只在公司内部使用。 就我个人来说&#xff0c;作为研发负责人&#xf…

高级深入--day44

Scrapy 和 scrapy-redis的区别 Scrapy 是一个通用的爬虫框架&#xff0c;但是不支持分布式&#xff0c;Scrapy-redis是为了更方便地实现Scrapy分布式爬取&#xff0c;而提供了一些以redis为基础的组件(仅有组件)。 pip install scrapy-redis Scrapy-redis提供了下面四种组件&a…

STM32G030F6P6 芯片实验 (一)

STM32G030F6P6 芯片实验 (一) 淘宝搞了几片, 没试过 G系列, 试试感觉. 先搞片小系统版: 套 STM32F103C8T6小系统板格式. 原理图: (1) Ref 有点跳, 从 STM32F103C8T6 系统板改的, 没重编号. (2) Type-C 纯给电, 砍了 16pin的, 直接换 6pin的。 (3) 测试LED放 B2。 (4) 测试底…

Java基于SpringBoot+Vue的网上图书商城管理系统(附源码,教程)

文章目录 1. 简介2 技术栈3 系统功能4系统设计4.1数据库设计 5系统详细设计5.1系统功能模块5.1系统功能模块5.2管理员功能模块 源码下载地址 1. 简介 本次设计任务是要设计一个网上图书商城&#xff0c;通过这个系统能够满足网上图书商城的管理功能。系统的主要功能包括首页、…

javascript中各种风骚的代码

1.判断数值符号是否相同 function numericSymbolsIsEqual(x: number, y: number): boolean {return (x ^ y) > 0}console.log(numericSymbolsIsEqual(1, 1))console.log(numericSymbolsIsEqual(-1, 1))console.log(numericSymbolsIsEqual(1, -1))console.log(numericSymbols…

利用STM32CubeMX和keil模拟器,3天入门FreeRTOS(0) —— 创建工程

前言 &#xff08;1&#xff09;FreeRTOS是我一天过完的&#xff0c;由此回忆并且记录一下。个人认为&#xff0c;如果只是入门&#xff0c;利用STM32CubeMX是一个非常好的选择。学习完本系列课程之后&#xff0c;再去学习网上的一些其他课程也许会简单很多。 &#xff08;2&am…

spring-代理模式

代理模式 一、概念1.静态代理2.动态代理 一、概念 ①介绍 二十三种设计模式中的一种&#xff0c;属于结构型模式。它的作用就是通过提供一个代理类&#xff0c;让我们在调用目标 方法的时候&#xff0c;不再是直接对目标方法进行调用&#xff0c;而是通过代理类间接调用。让不…

Centos虚拟机安装配置与MobaXterm工具及Linux常用命令

目录 一、Centos操作系统 1.1 Centos介绍 1.2 Centos虚拟机安装 1.3 配置centos的镜像 1.4 虚拟机开机初始设置 1.4.1 查看网络配置 1.4.2 编辑网络配置 二、MobaXterm工具 2.1 MobaXterm介绍 2.2 MobaXterm安装 2.3 切换国内源 三、Linux常用命令和模式 3.1 …

leetCode 260.只出现一次的数字 ||| + 位运算

260. 只出现一次的数字 III - 力扣&#xff08;LeetCode&#xff09; 给你一个整数数组 nums&#xff0c;其中恰好有两个元素只出现一次&#xff0c;其余所有元素均出现两次。 找出只出现一次的那两个元素。你可以按 任意顺序 返回答案。你必须设计并实现线性时间复杂度的算法且…

微信小程序 人工智能志愿者服务活动报名系统uniAPP+vue

基于java语言设计并实现了人工智能志愿者服务APP。该APP基于B/S即所谓浏览器/服务器模式&#xff0c;应用SpringBoot框架与HBuilder X技术&#xff0c;选择MySQL作为后台数据库。系统主要包括用户、志愿活动、活动报名、活动签到、服务职责、服务排行等功能模块。 本文首先介绍…

C++之回调函数使用和不使用using、typedef、function定义总结(二百五十三)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

prometheus服务发现

Consul简介 ◼ 一款基于golang开发的开源工具&#xff0c;主要面向分布式&#xff0c;服务化的系统提供服务注册、服务发现和配置管理 的功能 ◼ 提供服务注册/发现、健康检查、Key/Value存储、多数据中心和分布式一致性保证等功能 部署 curl -LO https://releases.hashicorp…