您现在的位置是:首页 > Javascript
当前栏目
微信小程序开发入门与实战(插槽及组件页面的生命周期)
2023-03-14 22:45:36 时间
自定义组件 - - 组件所在页面的生命周期
1、什么是组件所在页面的生命周期
有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期。
例如:每当触发页面的 show 生命周期函数的时候,我们希望能够重新生成一个随机的 RGB 颜色值。
在自定义组件中,组件所在页面的生命周期函数有如下 3 个,分别如 👇
2、pageLifetimes 节点
组件所在页面的生命周期函数,需要定义在 pageLifetimes 节点中 如 👇
代码如 👇
Component({ pageLifetimes:{ show(){ }, hide(){ }, resize(size){ } } })
3、生成随机的 RGB 颜色值
实现:每当页面显示时调用组件 生命周期Show 如 👇
showRandomColor(){ this.setData({ _rgbValue:{ r:Math.floor(Math.random()*266), g:Math.floor(Math.random()*266), b:Math.floor(Math.random()*266), } }) } pageLifetimes:{ show(){ this.showRandomColor(); }, },
自定义组件 - 插槽
1、什么是插槽
在自定义组件的 wxml 结构中,可以提供一个 节点(插槽),用于承载组件使用者提供的 wxml 结构。
2、单个插槽
在小程序中,默认每个自定义组件中只允许使用一个 《slot》 进行占位,这种个数上的限制叫做单个插槽。
使用如 👇
3、启用多个插槽
启用多个插槽在小程序的自定义组件中,需要使用多 插槽时,可以在组件的 .js 文件中,通过如下方式进行启用。
使用如 👇
options:{ multipleSlots:true }
4、定义多个插槽
- 可以在组件的 .wxml 中使用多个 标签,以不同的 name 来区分不同的插槽。
- 在使用带有多个插槽的自定义组件时,需要用 slot 属性来将节点插入到不同的 中。
- 效果如 👇
WXML <text2> <view slot="a1">插槽1</view> <view>插槽2</view> <view slot="a2">插槽2</view> </text2> 组件的WXML <slot name="a1"></slot> <view>插槽练习</view> <slot name="a2"></slot> 开启插槽 options:{ multipleSlots:true }
最后
下篇文章再见ヾ( ̄▽ ̄)ByeBye
相关文章
- Windows11这鸡肋功能太烦人?教你关闭系统小组件
- Windows 11小组件:你需要知道的一切
- HarmonyOS ArkUI之自定义组件侧滑菜单(JS)
- HarmonyOS自定义组件之分页功能组件封装实例
- 微软:2022年将重点解决Windows性能低下的问题
- HarmonyOS ArkUI之仿微信朋友圈图片预览
- Django3 使用 WebSocket 实现 WebShell
- 分库分表实战之订单业务完整梳理
- 太上老君的炼丹炉之分布式 Quorum NWR
- JeecgBoot的前端Form升级为FormModel用法
- 前端进阶:原生JavaScript实现具有进度监听的文件上传预览组件
- 如何编写神奇的「插件机制」,优化基于 Antd Table 封装表格的混乱代码
- Java8新特性系列-默认方法和静态方法
- Web开发应了解的5种设计模式
- 死磕JS:Reflect.ownKeys() 和 Object.keys() 怎么选?
- 看完这篇,再也不会害怕别人问我什么是原型了
- 为何每次用完 ThreadLocal 都要调用 remove()
- 软件工程必看——10条你最容易忽视的经典法则
- 浅析Dotnet的垃圾回收
- 前端基础知识整理汇总(下)