web学习笔记(七十四)

目录

1.小程序常用组件

1.1 view

1.2  navigator 

1.3 block

1.4 text

2.数据绑定

3.数据渲染 

4.列表渲染

5.条件渲染

wx:if 和 hidden的区别


1.小程序常用组件

1.1 view

 <view>是布局容器 相当于div 我们通常习惯给页面包裹一个根组件,但是小程序和vue不一样,vue要求我们只能有一个根组件,而小程序可以有多个根组件,页面不会报错,看个人习惯编写页面即可。

1.2  navigator 

<navigator>是用于创建页面跳转链接的组件,它类似于 HTML 中的 <a> 标签。

 <navigator url="/pages/renderdata/renderdata">一、渲染渲染响应式数据</navigator>

 navigator常用属性汇总:

url

必选属性,指定要跳转的页面路径。路径可以是绝对路径或相对路径。

open-type

可选属性,指定跳转链接的类型,常用的包括:

  • navigate:保留当前页面,跳转到应用内的某个页面。
  • redirect:关闭当前页面,跳转到应用内的某个页面。
  • switchTab:跳转到 tabBar 页面,并关闭其他非 tabBar 页面。
  • navigateBack:关闭当前页面,返回上一页面或多级页面。
hover-class

可选属性,指定点击时的样式类。点击时会在 <navigator> 上添加该样式类,用于视觉反馈。

hover-stop-propagation

可选属性,如果设置为 true,点击 <navigator> 时阻止事件冒泡。

hover-start-timehover-stay-time

可选属性,设置点击后开始和保持的时间,用于控制点击时的反馈效果。

1.3 block

block标签是一个容器,包裹多个组件,又不会生成标签dom。

1.4 text

在小程序中,<text> 标签用于显示文本内容,类似于 HTML 中的 <span> 标签,

2.数据绑定

小程序中数据和方法需要声明在.js文件中,在小程序中每一个页面路由组件都对应一个page实例对象,我们在这个对象中设置响应式数据、事件、组件生命周期。
    data内的数据是页面的初始数据:响应式数据,修改数据组件自动更新。响应式原理和vue是一样的。

特点:
   1.响应式数据发生改变,组件不会立即更行,不是同步的。
   2.等一次事件循环结束后再将所有数据的变化进行一次组件更新,效率更高。
   3.小程序会合并更新;

// pages/renderdata/renderdata.js
Page({data: {count: 1, //这个数据后面赋什么值,初始值就是什么类型。},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {},
});

3.数据渲染 

小程序再wxml页面进行数据的渲染,通过双大括号就可以渲染响应式数据。

<view class="render"><text>{{count}}</text>
</view>

属性也可以绑定一个变量或布尔值,此时也需要用双大括号进行包裹。否则系统会识别为一个字符串。

<view id='item-{{count}}'></view><view sex='{{true}}'></view>

4.列表渲染

在小程序中我们通过wx:for来进行循环的操作,同时需要通过wx:key来绑定key,绑定值可以为所有或者是数据内的唯一标识,

(1)使用索引作为 key

<view wx:for="{{items}}" wx:key="index"> <!-- items 是一个数组,每个项都会被渲染成一个 view --> </view>

在这个例子中,wx:key 绑定了 index,表示每个项的唯一标识是它在数组中的索引值。这种方式适合列表项顺序不会变化或者是静态数据的情况。

(2)使用唯一标识符作为 key(推荐使用)

 <view wx:for="{{users}}" wx:key="name"><text>姓名:{{item.name}}</text></view>

在这个例子中,假设 users 数组中的每个对象都有一个唯一的 name 属性,那么可以将 wx:key 设置为 name,确保每个项都有一个唯一的标识符作为 key。这种方式适合动态列表或者需要频繁更新和重排的情况。

默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item,仅限于循环内部使用。 

如果当需要多层循环进行嵌套使用时,可以通过使用 wx:for-item 可以指定数组当前元素的变量名,通过使用 wx:for-index 可以指定数组当前下标的变量名。

  <view wx:for="{{users}}" wx:key="name"><text>姓名:{{item.name}}</text><view  wx:for="{{users}}" wx:key="name" wx:for-index="i" wx:for-item="user">{{user.name}}</view></view>

5.条件渲染

在小程序中通过wx:if和hidden来控制元素的显示和隐藏。wx:if等价于vue中的v-if,hidden等价于小程序中的v-show。

wx:if 和 hidden的区别

因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。

相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。

一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。

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

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

相关文章

Java 基本数据类型和引用数据类型有什么区别?

在Java世界里&#xff0c;数据类型是构建程序的基石&#xff0c;它们决定了变量可以存储什么类型的值以及如何操作这些值。 Java的数据类型大致可以分为两大类&#xff1a;基本数据类型&#xff08;Primitive Data Types&#xff09;和引用数据类型&#xff08;Reference Data…

【C语言】手撕结构体内存对齐

©作者:末央&#xff06; ©系列:C语言初阶(适合小白入门) ©说明:以凡人之笔墨&#xff0c;书写未来之大梦 目录 结构体对齐规则结构体大小计算 - 三步曲 结构体对齐规则 怎么计算结构体的内存大小。这就涉及到结构体内存对齐的问题。 结构体的第⼀个成员对⻬到…

构建Memcached集群:深入集群部署的策略与实践

构建Memcached集群&#xff1a;深入集群部署的策略与实践 Memcached是一款高性能的分布式内存缓存系统&#xff0c;广泛应用于提高Web应用的性能和扩展性。集群部署Memcached可以提供更高的缓存容量和可用性。本文将深入探讨Memcached集群部署的策略和注意事项&#xff0c;并提…

【C++】多态详解

&#x1f497;个人主页&#x1f497; ⭐个人专栏——C学习⭐ &#x1f4ab;点击关注&#x1f929;一起学习C语言&#x1f4af;&#x1f4ab; 目录 一、多态概念 二、多态的定义及实现 1. 多态的构成条件 2. 虚函数 2.1 什么是虚函数 2.2 虚函数的重写 2.3 虚函数重写的两个…

PyPDF2拆分PDF文件为单个页面

本文目录 前言一、拆分成为单页1、代码解析2、处理效果图3、完整代码二、其它知识1、enumerate是什么① 语法② 功能③ 示例④ 更改起始索引前言 感觉之前写的不是很满意,为了充分满足付费用户的权益,所以打算把PyPDF2的各种类和用法都重新写一下,以便满足所有订阅用户的各…

transformer模型学习路线_transformer训练用的模型

Transformer学习路线 完全不懂transformer&#xff0c;最近小白来入门一下&#xff0c;下面就是本菜鸟学习路线。Transformer和CNN是两个分支&#xff01;&#xff01;因此要分开学习 Transformer是一个Seq2seq模型&#xff0c;而Seq2seq模型用到了self-attention机制&#xf…

三分钟看懂SMD封装与COB封装的差异

全彩LED显示屏领域中&#xff0c;COB封装于SMD封装是比较常见的两种封装方式&#xff0c;SMD封装产品主要有常规小间距以及室内、户外型产品&#xff0c;COB封装产品主要集中在小间距以及微间距系列产品中&#xff0c;今天跟随COB显示屏厂家中品瑞一起快速看懂SMD封装与COB封装…

使用高斯混合模型识别餐厅热点

使用 GMM 识别加拿大多伦多的直观餐厅集群&#xff08;附 Python 代码&#xff09; 聚类算法&#xff08;例如 GMM&#xff09;是一种有用的工具&#xff0c;可帮助识别数据中的模式。它们使我们能够识别数据集中的子组&#xff0c;从而提高你的理解或增强预测模型。在本文中&a…

DDR3(一)

目录 1 SDRAM1.1 同步动态随机存储器1.2 位宽1.3 SDRAM结构1.4 SDRAM引脚图 2 SDRAM操作指令2.1 读写指令2.2 刷新和预充电2.3 配置模式寄存器2.4 读/写突发2.5 数据屏蔽 SDRAM是DDR3的基础&#xff0c;在学习DDR3之前&#xff0c;我们先来学习一下SDRAM的相关知识。 1 SDRAM …

同样的APP为何在Android 8以后网络感觉变卡?

前言 在无线网络技术不断发展的今天&#xff0c;Wi-Fi已经成为了我们日常生活中不可或缺的一部分。无论是家庭娱乐、办公还是在线游戏&#xff0c;Wi-Fi都在提供着便捷的互联网接入服务。然而&#xff0c;在安卓8.1后&#xff0c;为了进一步延长安卓设备的待机时间。原生安卓(A…

推荐三款常用接口测试工具!

接口测试是软件开发中至关重要的一环&#xff0c;通过对应用程序接口进行测试&#xff0c;可以验证其功能、性能和稳定性。随着互联网和移动应用的快速发展&#xff0c;接口测试变得越来越重要。为了提高测试效率和质量&#xff0c;开发人员和测试人员需要使用专业的接口测试工…

【SCAU操作系统】期末复习简答及计算题例题解析

目录 一、写出下列英文缩写词在计算机系统中的英文或中文全名。 二、进程状态/调度/周转问题 &#xff08;1&#xff09;进程状态 &#xff08;2&#xff09;进程状态转换 &#xff08;3&#xff09;进程调度 &#xff08;4&#xff09;最短进程优先调度算法 三、逻辑地…

鸿蒙开发设备管理:【@ohos.runningLock (Runninglock锁)】

Runninglock锁 该模块主要提供Runninglock锁相关操作的接口&#xff0c;包括创建、查询、持锁、释放锁等操作。 说明&#xff1a; 本模块首批接口从API version 7开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import runningLock f…

经典资料分享:macOS设计指南(持续更新)

​MacOS设计指南是Mac应用设计必备的指导手册&#xff0c;学姐特提示完整指南文档给大家&#xff0c;原版中英文对照&#xff0c;实用方便查询。 因为文档内容太多&#xff0c;在后继的几个月会持续更新。本周更新内容为&#xff1a; 『MacOS设计指南-应用程序架构篇』 指南内容…

Gemma-2B离线运行-基于transformer

Gemma-2B离线运行-基于transformer 下载模型 一般而言&#xff0c;模型和模型参数可以通过如下三个模型源进行相应的下载&#xff1a; HuggingFace | ModelScope | WiseModel 本实例中&#xff0c;使用的是HuggingFace的源下载&#xff0c;相应的地址如下&#xff1a; https:…

mysql执行sql语句的详细过程,你知道吗?进来看一看,一解迷惑

前言 MySQL 在执行 SQL 语句时&#xff0c;经历了多个步骤和不同的组件&#xff0c;每个步骤都涉及特定的任务。以下是 MySQL 执行 SQL 语句的详细过程: 步骤 客户端请求 客户端通过 MySQL 客户端&#xff08;例如 mysql 命令行工具、JDBC 或其他 API&#xff09;向 MySQL 服…

洛谷 P1078 [NOIP2012 普及组] 文化之旅

题意 有一个 n n n 点 m m m 边的无向图&#xff0c;每个点都有一个颜色&#xff08;可能重复&#xff09;&#xff0c;还给定了一个矩阵 A A A。如果经过了颜色为 i i i 的点&#xff0c;那就不能再经过颜色为 i i i 的点以及满足 A i , j 1 A_{i,j}1 Ai,j​1 的颜色为…

Vuex的基本使用

1.安装vuex npm i vuex3 2.引入 import Vuex from vuex 3.使用 Vue.use(Vuex) 4.在src下的目录创建store&#xff0c;新建index.js import store from ./store 5.编写index.js import Vue from vue import Vuex from vuex Vue.use(Vuex)//用于操作组件中的动作 const actions{a…

零知识学习之DPDK与RDMA(3)—— 认识DPDK(3)

接前一篇文章&#xff1a;零知识学习之DPDK与RDMA&#xff08;2&#xff09;—— 认识DPDK&#xff08;2&#xff09; 本文内容参考&#xff1a; 《Linux高性能网络详解 从DPDK、RDMA到XDP》 刘伟著 人民邮电出版社 https://blog.51cto.com/u_15301988/5181201 特此致谢&…

视频分析、目标检测的过去和未来:目标检测从入门到精通 ------ YOLOv8 到 多模态大模型处理视觉基础任务

文章大纲 计算机视觉项目的关键步骤目标检测入门视频分析项目最佳实践数据集构建数据准备:数据集标注规范与数据规模参考标注工具标注工具:目标检测yolo 极简标注工具综合标注工具:label-studio半自动标注工具:X-AnyLabeling目标检测与多模态哪些多模态模型可以做目标检测?…