实用指南:微信小程序-6-页面布局和事件绑定以及页面跳转

news/2025/9/20 11:05:22/文章来源:https://www.cnblogs.com/tlnshuju/p/19102121

实用指南:微信小程序-6-页面布局和事件绑定以及页面跳转

2025-09-20 10:56  tlnshuju  阅读(0)  评论(0)    收藏  举报

文章目录

  • 1 页面布局
    • 1.1 导航布局
      • 1.1.1 index.wsml
      • 1.1.2 index.wxss
    • 1.2 通知布局
      • 1.2.1 index.wsml
      • 1.2.2 index.wxss
    • 1.3 底部布局
      • 1.3.1 index.wxml
      • 1.3.2 index.wxss
  • 2 事件绑定
    • 2.1 基本应用
      • 2.1.1 my.wsml
      • 2.1.2 my.js
    • 2.2 事件冒泡
      • 2.2.1 my.wxml
      • 2.2.2 my.js
      • 2.2.3 阻止事件冒泡(my.wsml)
    • 2.3 事件对象和传参
      • 2.3.1 my.wxml
      • 2.3.2 my.js
  • 3 页面跳转
    • 3.1 组件跳转(声明式导航)
    • 3.2 js跳转(编程式导航)

介绍flex布局在小脚本中的应用。事件的绑定、冒泡和传参。页面跳转的两个方式:组件跳转(声明式)、js跳转(编程式)。

1 页面布局

1.1 导航布局

1.1.1 index.wsml

<view class="menu"><view class

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

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

相关文章

终旅之始——2025 . 9 . 20

开始的结束,结束的开始。今天是 2025 年九月的第三个星期六,也就是 CSP-2025 初赛的日子。 这是我最后一次以学生身份参加 CSP 了啊,想来还是有些悲伤。 2023 年,那时的我应该是紧张的,2024 年,那时的我的确是平…

CentOS 7 源码版 PhpMyAdmin 安装指南(适配 Nginx+PHP-FPM 环境) - 教程

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

深入理解Django Admin只读字段与保存模型的自定义操作 - 详解

深入理解Django Admin只读字段与保存模型的自定义操作 - 详解pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Cons…

深度学习(视觉注意力SeNet/CbmaNet/SkNet/EcaNet)

这些网络提供了一种即插即用的注意力模块,可以嵌入到现有的主流架构(如ResNet, VGG, MobileNet等)中,带来几乎无成本的性能提升。 四种网络核心思想: 1. SENet (Squeeze-and-Excitation Network): 通道注意力(C…

起床

(排名不分先后)奔流Dive back int timeyesterday once more等你下课晴天新宝岛power(Luna LePage)moon halo龙拳this is me裂缝中的阳光孤勇者明天会更好七里香爱的飞行日记稻香natural霍元甲凄美地没有理想的人不伤…

qoj6277 Linear Congruential Generator

SOLUTION FROM WUMIN4 题意 给出无穷序列 \(X_0\) 的值和 \(a,c\),令 \(X_{i+1}=(aX_i+c)\bmod m\)。 给出 \(l_1,r_1,l_2,r_2\),求: \[\sum_{i=l_1}^{r_1} \sum_{j=l_2}^{r_2}( X_i \bmod (X_j+1)) \]\(1\le T\le …

AI智能体服务优秀的平台架构设计

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

Node.js、npm 和 npx:前端开发的三剑客 - 指南

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

docker+k8s

docker和k8s一些共同点 1、k8s的最小单位是pod,pod里面就是docker中的容器(容器上面又加了一层),所以可以将pod理解为一个虚拟服务器(Pod 是容器的 “逻辑主机”,它内部的容器共享网络、存储等资源),当然现实的…

多模型适配突围:JBoltAI如何重构企业数智化转型新范式?

多模型适配突围:JBoltAI如何重构企业数智化转型新范式?2025年7月,麦肯锡发布的《技术趋势展望报告》指出,人工智能正由其他技术的“基础增强器”转变为具备自主决策能力的“虚拟同事”,其影响力已广泛渗透至技术融…

JBoltAI赋能制造业数智化转型:AI从概念到落地的Java实践

JBoltAI赋能制造业数智化转型:AI从概念到落地的Java实践01. 人工智能正在重塑制造业格局2025年,人工智能不再是遥远的概念,而是成为了推动产业变革的核心动力。工信部近期表示,正在研究出台 “人工智能+制造”专项…

JBoltAI赋能医疗数智化转型:AI大模型如何重塑医疗健康新范式

JBoltAI赋能医疗数智化转型:AI大模型如何重塑医疗健康新范式医疗健康领域的数智化挑战当前,全球医疗系统正面临巨大压力:医疗资源分布不均、诊疗效率待提升、专业医生培养周期长、海量医学知识难以即时更新与应用。…

JBoltAI多模态赋能:制造业数智化升级的新引擎

JBoltAI多模态赋能:制造业数智化升级的新引擎2025年,人工智能已成为推动产业数智化转型的核心驱动力。据麦肯锡研究显示,全球超过900万家Java企业正面临技术重构压力,传统Java开发体系在AI化转型过程中遭遇多模型适…

深入解析:YARN架构解析:深入理解Hadoop资源管理核心

深入解析:YARN架构解析:深入理解Hadoop资源管理核心pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas&qu…

JBoltAI:破解Java企业级AI应用落地难题的利器

JBoltAI:破解Java企业级AI应用落地难题的利器随着国务院印发《关于深入实施“人工智能+”行动的意见》,“AI+”已成为各行业企业实现生产力革命性跃迁、提升生产经营能力的重要举措。在这场数智化转型浪潮中,Java作…

直播软件开发,单例设计模式很简单吗? - 云豹科技

直播软件开发,单例设计模式很简单吗?写在前面单例设计模式,相信是大家接触设计模式时的入门设计模式,它理解起来比较简单,当然实现起来也很简单,但是别看不上这简单的东西,简单的事情重复做将不再简单,再复杂的…

Java开发者的AI革命:如何用JBoltAI应对数智化转型挑战

Java开发者的AI革命:如何用JBoltAI应对数智化转型挑战01 AI时代的浪潮与Java开发者的困境2025年,人工智能技术正以前所未有的速度重塑整个软件产业。根据麦肯锡《2025年技术趋势展望报告》,AI正在从"基础增强器…

JBoltAI:赋能Java老项目快速接入AI能力的创新之道

JBoltAI:赋能Java老项目快速接入AI能力的创新之道近年来,随着人工智能技术的迅猛发展,我们正处在一个从数字化到数智化转型的关键时期。根据2025全球人工智能展望报告,2025年被视为“智能体元年”,AI Agent已成为…

Day04 C:\Users\Lenovo\Desktop\note\code\JavaSE\Basic\src\com\David\operator Demo01-08+Doc

快捷键 查看源代码:ctrl+B或ctrl+左键 自动对齐:ctrl+alt+I 查看源码:ctrl+alt+Q 运行代码:ctrl+shift+F10 类型转换 byte, short, char->int->long->float->double 变量 //数据类型 变量名 = 值; typ…

实用指南:养老专业实训室建设方案的分级设计与人才培养适配

实用指南:养老专业实训室建设方案的分级设计与人才培养适配pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Conso…