【微信小程序】基本语法

目录

一、列表渲染(包括wx:for改变默认)

二、事件冒泡和事件捕获

三、生命周期

 

一、列表渲染(包括wx:for改变默认)

1、列表渲染(wx-for、block 改变默认wx:for item等)


<view> {{msg}} </view>    //渲染跟普通vue渲染一样  <view wx:for="{{list}}" wx:key="index">     //for 循环  
{{item.name}} --- {{index}}
</view>                      //双层for循环需要改变item默认值   
<view wx:for="{{list}}" wx:for-item="it"  wx:for-index="idx" wx:key="idx">
{{it.name}} --- {{idx}}
</view><block wx-if={{flag}}>                        // block 不会显示到页面类似 <template><view wx:if="{{it.age>15}}">{{it.age}}</view>    //   wx-if <view wx:else>{{item.age}}</view>
</block>

二、事件冒泡和事件捕获

事件冒泡

  • 当一个子组件上的事件被触发时,该事件会向父节点传递,直到根节点。开发者可以在父节点上捕获到这个事件,并进行相应的处理。这种方式适合于处理从子组件冒泡上来的事件,通常使用catch绑定事件。

事件捕获

  • 与事件冒泡相反,事件捕获是从父节点向子节点传递事件。当一个父节点上的事件被触发时,会先经过捕获阶段,然后再到达目标节点。这种方式适合于在事件到达目标节点之前对事件进行处理,通常使用capture绑定事件。

 

 事件冒泡

<view class="param" catchtap="paramClick"><view class="child" catchtap="childClick"></view>
</view>

事件捕获

<view class="param" capture-bind:tap="paramClick"><view class="child" capture-bind:tap="childClick"></view>
</view>

阻止捕获(点击子还是触发父辈点击了)

<view class="param" capture-catch:tap="paramClick"><view class="child" capture-bind:tap="childClick"></view>
</view>

 

三、生命周期

     每个页面和组件都有自己的生命周期函数,这些生命周期函数可以让开发者在特定的时机添加自己的逻辑代码。以下是小程序中常见的页面生命周期函数

  1. onLoad:页面加载时触发,一般用于页面初始化数据。

  2. onShow:页面显示时触发,包括从其他页面返回当前页面、小程序启动等情况。

  3. onReady:页面初次渲染完成时触发,可以进行页面渲染相关的操作。

  4. onHide:页面隐藏时触发,一般用于页面跳转到其他页面时执行清理工作。

  5. onUnload:页面卸载时触发,一般用于清理页面数据和监听事件。


Page({onLoad(options) {},//生命周期函数--监听页面加载onReady() {},  //生命周期函数--监听页面初次渲染完成onShow() {},  //生命周期函数--监听页面显示onHide() {},   //生命周期函数--监听页面隐藏onUnload() {},   //生命周期函数--监听页面卸载onPullDownRefresh() {}, //页面相关事件处理函数--监听用户下拉动作onReachBottom() {}, //页面上拉触底事件的处理函数onShareAppMessage() {}   //用户点击右上角分享
})

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

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

相关文章

泛型 --java学习笔记

什么是泛型 定义类、接口、方法时&#xff0c;同时声明了一个或者多个类型变量&#xff08;如&#xff1a;<E>&#xff09;&#xff0c;称为泛型类、泛型接口&#xff0c;泛型方法、它们统称为泛型 可以理解为扑克牌中的癞子&#xff0c;给它什么类型它就是什么类型 如…

设计模式—适配器模式

概念: 适配器模式&#xff08;有时候也称包装样式或者包装&#xff09;将一个类的接口适配成用户所期待的。一个适配允许通常因为接口不兼容而不能在一起工作的类工作在一起&#xff0c;做法是将类自己的接口包裹在一个已存在的类中。 本章代码: 小麻雀icknn/设计模式练习 - Gi…

开源的前端思维导图库介绍

在开源社区中&#xff0c;有许多优秀的思维导图库可供开发者使用。这些库通常具有丰富的功能和灵活的API&#xff0c;可以满足不同需求的前端开发。以下是一些流行的开源前端思维导图库&#xff0c;以及它们的特点和区别。 1. **MindMap** 特点&#xff1a; - 基于原生…

【数据结构】二、线性表:4.循环链表的定义及其基本操作(循环单链表,循环双链表的初始化、判空、判断头结点、尾结点、插入、删除)

文章目录 4.循环链表4.1循环单链表4.1.1初始化4.1.2判断单链表是否为空4.1.3判断p结点是否为循环单链表的表尾结点 4.2循环双链表4.2.1初始化4.2.2判断循环链表是否为空4.2.3判断结点p是否为循环双链表的表尾结点4.2.4双链表的插入4.2.5双链表的删除 4.循环链表 4.1循环单链表…

十堰网站建设公司华想科技具有10年的网站制作经验

2018年已经结束了。 华翔科技收到了很多客户的咨询&#xff0c;他们都有一个共同的问题&#xff1a;建一个网站需要多少钱&#xff1f; 但是&#xff0c;我们都会问&#xff1a;您有什么具体需求吗&#xff1f; 大多数人的答案是否定的&#xff0c;他们只是想打听一下价格。 十…

《JAVA与模式》之模板方法模式

系列文章目录 文章目录 系列文章目录前言一、模板方法模式的结构二、模板方法模式中的方法三、使用场景四、模板方法模式在Servlet中的应用前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了…

【MySQL 系列】MySQL 起步篇

MySQL 是一个开放源代码的、免费的关系型数据库管理系统。在 Web 开发领域&#xff0c;MySQL 是最流行、使用最广泛的关系数据库。MySql 分为社区版和商业版&#xff0c;社区版完全免费&#xff0c;并且几乎能满足全部的使用场景。由于 MySQL 是开源的&#xff0c;我们还可以根…

基于springboot的大学生智能消费记账系统的设计与实现(程序+数据库+文档)

** &#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;** 一、研究背景…

c++ 11 新特性 不同数据类型之间转换函数之const_cast

一.不同数据类型之间转换函数const_cast介绍 const_cast是C11中引入的一种类型转换操作符&#xff0c;用于修改类型的const或volatile属性。const_cast的主要用途是移除对象的常量性&#xff0c;它是唯一具有此能力的C风格的转型操作符。在C11中&#xff0c;const_cast可以完成…

HarmonyOS—配置编译构建信息

在进行应用/服务的编译构建前&#xff0c;需要对工程和编译构建的Module进行设置。API Version 9、API Version 8与API Version 4~7的构建体系不同&#xff0c;因此在设置编译构建信息时也存在差异&#xff1a; API Version 9&#xff1a;需要对构建配置文件、构建脚本、应用依…

中医舌苔笔记

目录 一.不适合舌诊的情况吃了有色东西的食物不要看舌象&#xff0c;晨起不要看舌象尽量不要在饭后半小时内看舌象尽量不要在有色灯光下看舌象吃了某些抗生素、某些化学添加剂后不要看舌象。月经期不要看舌象 二.舌诊顺序三.舌诊脏腑部位分属图四.看舌是看什么&#xff1f;舌体…

世界的本质是旋转(5)-在复平面上驱动软件无线电SDR发射BPSK波形

在上一篇文章中&#xff0c;我们介绍了复平面、拍照采样的一些思维实验。从本节开始&#xff0c;转入现实应用&#xff0c;通过控制复平面向量的位置&#xff0c;实现一个完整的BPSK全双工通信通道。 发射方&#xff1a;通过控制复平面向量在各个时刻的位置来携带信息的技术&a…

qml 怎么将ChartView 的 background 图层的边距设置为 0

qml的ChartView有个background图层,background图层默认是有边距的,而且这个边距是没有属性与方法可以修改的,假如我要创建两个ChartView,让他们纵向紧挨着,实际结果如图: 代码如下: ColumnLayout {id: mainColumnanchors.fill: parentanchors.leftMargin: 10spacing: 0…

网络原理初识

一、IP地址 概念 IP 地址主要用于标识网络主机、其他网络设备&#xff08;如路由器&#xff09;的网络地址。简单说&#xff0c; IP 地址用于定位主机 的网络地址 。 就像我们发送快递一样&#xff0c;需要知道对方的收货地址&#xff0c;快递员才能将包裹送到目的地。 二、…

k8s-生产级的k8s高可用(1) 24

高可用集群 实验至少需要三个master&#xff08;控制节点&#xff09;&#xff0c;一个可以使外部可以访问到master的load balancer&#xff08;负载均衡&#xff09;以及一个或多个外部节点worker&#xff08;也要部署高可用&#xff09;。 再克隆三台主机 清理并重启 配置两…

C++惯用法之RAII思想: 资源管理

C编程技巧专栏&#xff1a;http://t.csdnimg.cn/eolY7 相关系列文章 C智能指针的自定义销毁器(销毁策略) 目录 1.概述 2.RAII的应用 2.1.智能指针 2.2.文件句柄管理 2.3.互斥锁 3.注意事项 3.1.禁止复制 3.2.对底层资源使用引用计数法 3.3.复制底部资源(深拷贝)或者转移…

2024新版微信小程序登录注册功能的实现,授权登录,退出,缓存讲解,小程序个人中心的实现,修改头像 图片上传功能的实现 新版登陆注册,头像上传,修改昵称

新版小程序授权登录注册获取头像昵称文档 一&#xff0c;无法获取用户的微信头像和昵称 最近好多同学在学习石头哥小程序课程的时候&#xff0c;遇到了下面这样的问题&#xff0c;在小程序授权获取用户头像和昵称时&#xff0c;获取到的是下面这样的。 到底是什么原因导致的…

YOLO v1讲解

YOLO是最经典的一阶目标检测框架&#xff0c;记录一下v1思路。 整体流程 输入数据一张 448 448 3 448 \times 448 \times 3 4484483 的图片&#xff0c;切分成 7 7 7 \times 7 77 的网格将图片经过多层CNN&#xff0c;下采样得到 7 7 30 7 \times 7 \times 30 7730 的f…

代码随想录算法训练营第day9|28. 找出字符串中第一个匹配项的下标、459.重复的子字符串

a.28. 找出字符串中第一个匹配项的下标 题目链接 给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 示…

关于JVM的小总结(待补充)

JVM组成及他们之间的关系 装载类子系统字节码执行引擎运行时数据区 装载类子系统 类加载器字节码调节器类加载运行时数据区 字节码执行引擎 运行时数据区 线程私有 虚拟机栈本地方法栈程序计数器 线程共享 堆方法区&#xff08;元空间&#xff09;