深圳做网站网络营销公司排名,网站文章不收录,网站建设 国外,电子商务网站制作步骤目录
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 我们通常习惯给页面包裹一个根组件#xff0c;但是小程序…
目录
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-time 和 hover-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 classrendertext{{count}}/text
/view
属性也可以绑定一个变量或布尔值此时也需要用双大括号进行包裹。否则系统会识别为一个字符串。
view iditem-{{count}}/viewview sex{{true}}/view
4.列表渲染
在小程序中我们通过wx:for来进行循环的操作同时需要通过wx:key来绑定key绑定值可以为所有或者是数据内的唯一标识
1使用索引作为 key
view wx:for{{items}} wx:keyindex !-- items 是一个数组每个项都会被渲染成一个 view -- /view
在这个例子中wx:key 绑定了 index表示每个项的唯一标识是它在数组中的索引值。这种方式适合列表项顺序不会变化或者是静态数据的情况。
2使用唯一标识符作为 key(推荐使用) view wx:for{{users}} wx:keynametext姓名{{item.name}}/text/view
在这个例子中假设 users 数组中的每个对象都有一个唯一的 name 属性那么可以将 wx:key 设置为 name确保每个项都有一个唯一的标识符作为 key。这种方式适合动态列表或者需要频繁更新和重排的情况。
默认数组的当前项的下标变量名默认为 index数组当前项的变量名默认为 item仅限于循环内部使用。
如果当需要多层循环进行嵌套使用时可以通过使用 wx:for-item 可以指定数组当前元素的变量名通过使用 wx:for-index 可以指定数组当前下标的变量名。 view wx:for{{users}} wx:keynametext姓名{{item.name}}/textview wx:for{{users}} wx:keyname wx:for-indexi wx:for-itemuser{{user.name}}/view/view
5.条件渲染
在小程序中通过wx:if和hidden来控制元素的显示和隐藏。wx:if等价于vue中的v-ifhidden等价于小程序中的v-show。
wx:if 和 hidden的区别
因为 wx:if 之中的模板也可能包含数据绑定所以当 wx:if 的条件值切换时框架有一个局部渲染的过程因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的如果在初始渲染条件为 false框架什么也不做在条件第一次变成真的时候才开始局部渲染。
相比之下hidden 就简单的多组件始终会被渲染只是简单的控制显示与隐藏。
一般来说wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此如果需要频繁切换的情景下用 hidden 更好如果在运行时条件不大可能改变则 wx:if 较好。
