【微信小程序】基本语法

目录

一、列表渲染(包括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.hqwc.cn/news/522541.html

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

相关文章

【JavaEE初阶】 JVM类加载简介

文章目录 &#x1f343;前言&#x1f332;类加载过程&#x1f6a9;加载&#x1f6a9;验证&#x1f6a9;准备&#x1f6a9;解析&#x1f6a9;初始化 &#x1f384;双亲委派模型&#x1f6a9;什么是双亲委派模型&#xff1f;&#x1f6a9;双亲委派模型的优点 ⭕总结 &#x1f343…

JVM-虚拟机栈概述

背景&#xff1a;由于跨平台的设计&#xff0c;java指令都是根据栈来设计的。不同平台CPU架构不同&#xff0c;所以不能设计为基于寄存器。 栈是运行时单位&#xff0c;而堆是存储的单位。即&#xff1a;栈解决程序运行的问题&#xff0c;即程序如何执行&#xff0c;或者说如何…

YOLO建筑物损伤评估数据集

YOLO建筑物损伤评估数据集&#xff0c;重度损伤&#xff0c;轻微损伤&#xff0c;中度损伤&#xff0c;未损伤4类&#xff0c;近五千张图像&#xff0c;yolo标注完整&#xff0c;应用数据增强。 适用于CV项目&#xff0c;毕设&#xff0c;科研&#xff0c;实验等 需要此数据集…

老司机都懂的!【打赏】完美运营的最新视频打赏系统

完美运营的最新视频打赏系统优于市面上95%的打赏系统&#xff0c;与其他打赏系统相比&#xff0c;功能更加强大&#xff0c;完美运营且无bug。支付会调、短链接生成、代理后台、价格设置和试看功能等均没有问题。 以上为原简介&#xff0c;经测试验证。成功搭建并可以正常进入…

leetcode 热题 100_除自身以外数组的乘积

题解一&#xff1a; 前缀 / 后缀数组&#xff1a;某元素除自身以外的乘积&#xff0c;也就是其全部前缀元素乘积 * 全部后缀元素乘积&#xff0c;因此我们可以构造前缀数组和后缀数组&#xff0c;分别存储前i个元素的成绩和后i个元素的乘积&#xff0c;再将i-1前缀乘积 * i1后缀…

哨兵系列数据下载(哨兵2号Sentinel-2下载)

目录 一、介绍 二、哨兵二号介绍 三、数据下载 1、注册账号 2、数据下载 3、相关问题 四、数据预处理 1、大气校正 2、重采样 五、其他问题 一、介绍 哨兵&#xff0d;1卫星是全天时、全天候雷达成像任务&#xff0c;用于陆地和海洋观测&#xff0c;首颗哨兵&#xf…

解答关于:水牛社软件是做什么的?水牛社软件靠谱么?

很多对我们软件感兴趣但是没有入手的观望者都会有这样的疑问&#xff1a;水牛社软件具体是做什么的&#xff1f;水牛社软件靠谱么&#xff1f; 其实软件的简介已经讲的很清楚了&#xff0c;但是软件不是功能性软件&#xff0c;所以不能给大家免费试用&#xff0c;短期任务版块…

go语言添加代理

LiteIDE 工具->管理 https://mirrors.aliyun.com/goproxy/或https://goproxy.cn,direct 命令行 go env -w GOPROXYhttps://goproxy.cn,direct

深度学习与人类的智能交互:迈向自然与高效的人机新纪元

引言 随着科技的飞速发展&#xff0c;深度学习作为人工智能领域的一颗璀璨明珠&#xff0c;正日益展现出其在模拟人类认知和感知过程中的强大能力。本文旨在探讨深度学习如何日益逼近人类智能的边界&#xff0c;并通过模拟人类的感知系统&#xff0c;使机器能更深入地理解和解…

freeRTOS20240308

1.总结任务的调度算法&#xff0c;把实现代码再写一下 2.总结任务的状态以及是怎么样进行转换的

js【详解】原型 vs 原型链

原型 每个 class 都有显示原型 prototype每个实例都有隐式原型_proto_实例的_proto_指向对应 class 的 prototype 如下范例&#xff1a; class Student 创建了 实例 xialuo 获取属性 xialuo.name 或执行方法 xialuo.sayhi()时&#xff0c;先在自身属性和方法寻找&#xff0…

云轴科技ZStack荣获证券基金行业信息技术应用创新联盟年度优秀成员奖

近日&#xff0c;由中国证监会科技监管司、上海市经济和信息化委员会及上交所理事会科技发展委员会指导&#xff0c;证券基金行业信息技术应用创新联盟&#xff08;简称信创联盟&#xff09;主办的2023年年度工作会议在上海成功举办。会议汇聚了来自监管机构、政府机构、行业侧…