微信小程序(十六)slot插槽

注释很详细,直接上代码

上一篇

温馨提醒:此篇需要自定义组件的基础,如果不清楚请先看上一篇
新增内容:
1.单个插槽
2.多个插槽
单个插糟

源码:

myNav.wxml

<view class="navigationBar custom-class"><view class="navigationBarTitle title-class">自定义标题<slot></slot>//插槽位置</view>
</view>

index.wxml

<myNav custom-class="color-pink">
<text>🍉</text>
</myNav>

注意事项:没有注意事项

效果演示:

在这里插入图片描述

多个卡槽

多个卡槽需要提前声明一下

源码:

myNav.js

`myNav.js`
```js
Component({options:{multipleSlots:true//设置支持多个卡槽}
})

不同的插槽需要命名(自定义命名)

myNav.wxml

<view class="navigationBar custom-class"><view class="navigationBarTitle title-class"><slot name="left"></slot>自定义标题<slot name="right"></slot></view>
</view>

index.wxml

<myNav custom-class="color-pink">
<text slot="left">🍉</text>
<text slot="right">🐼</text>
</myNav>

效果演示

在这里插入图片描述

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

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

相关文章

师如灯塔,照我前行:我在誉天的RHCA认证之旅

时光荏苒&#xff0c;岁月如梭。2022年10月&#xff0c;我踏上了通向RHCA&#xff08;Red Hat Certified Architect&#xff09;证书的征程。2023年11月&#xff0c;我成功拿到了RHCA证书&#xff0c;也给这段旅程画上了圆满的句号。 而在这充满挑战和成长的旅程中&#xff0c;…

防火墙ip配置

如图所示需要配置该拓扑的ip 1.首先在交换机7上创建vlan 2 3 [Huanwei]vlan batch 2 3 2.分别进入0/0/3 和0/0/2接口 [Huawei-GigabitEthernet0/0/3]port link-type access [Huawei-GigabitEthernet0/0/2]port link-type access 3.定义所属vlan [Huawei-GigabitEthernet0…

【python爬虫】爬虫编程技术的解密与实战

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a; 爬虫】网络爬虫探秘⏰诗赋清音&#xff1a;云生高巅梦远游&#xff0c; 星光点缀碧海愁。 山川深邃情难晤&#xff0c; 剑气凌云志自修。 目录 &#x1f33c;实验目的 &#x1f…

数字孪生系统的难点

数字孪生系统的开发和实施涉及一些技术难点&#xff0c;这些难点需要综合应用多个领域的知识和技术来克服。以下是一些数字孪生系统开发中的技术难点&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1…

【每日一题】4.LeetCode——杨辉三角

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ &#x1f64f;小杨水平有限&#xff0c;欢迎各位大佬指点&…

监听元素宽高变化---new ResizeObserver

参考&#xff1a;ResizeObserver API详解-CSDN博客 有的时候需要监听某个元素的宽高变化&#xff0c;这个时候可以使用JS的 resizeObserver 钩子函数。 用于监视元素的大小变化。它可以观察一个或多个 DOM 元素&#xff0c;以便在元素的大小或形状发生变化时触发回调函数。R…

安全用电管理平台方案介绍——Acrelcloud-6000

安全用电管理平台是一个针对电力系统安全管理的平台&#xff0c;旨在提供对电力设备和用电行为进行监控、分析和管理的解决方案。该平台结合了物联网技术、数据分析和远程监控等技术手段&#xff0c;能够实时监测、分析和预警电力系统的安全状况&#xff0c;以便及时采取措施防…

广州工业元宇宙赋能新型工业化,推动工业制造业数字化转型发展

随着科技的飞速发展&#xff0c;新型工业化的概念逐渐成为全球关注的焦点。在数字化转型的浪潮中&#xff0c;工业制造业的发展面临着巨大的机遇和挑战。广州作为中国南方的重要工业基地&#xff0c;积极探索工业元宇宙的赋能作用&#xff0c;以推动工业制造业的数字化转型发展…

[蓝桥学习] 前缀和与差分

前缀和原理 特点 求区间和 如果要实现一边修改一边查询&#xff0c;需要使用树状树组和线段树。 例题 题目很简单&#xff0c;但是代码实现惊艳到我了&#xff0c;是L就加1&#xff0c;是Q就减1&#xff0c;如果区间 [i,j] 是平衡子串的话&#xff0c;那它会在前缀prefix i …

基于Kubernetes(K8s)构建企业容器云基础运行环境

cncfstack 新 文章上线&#xff1a; 书名&#xff1a;《云原生解决方案》 地址&#xff1a;https://zhaowenyu.com/cncf-solution 访问&#xff1a;文章底部“阅读原文”或访问域名 云原生计算是云计算发展新的里程碑阶段&#xff0c;是当今与未来很长一段时间中 IT 发展的技…

【学网攻】 第(10)节 -- 路由器单臂路由配置

系列文章目录 目录 系列文章目录 文章目录 前言 一、单臂路由是什么&#xff1f; 二、实验 1.引入 实验拓扑图 PC配置 Sw配置 Router配置 实验验证 总结 文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交换机认识及使用【学网攻】 第(3)节 -- 交…

【医学图像隐私保护】PLAN方法:解决 GAN 生成医学图像 Latent 空间中的隐私保护

PLAN方法&#xff1a;解决 GAN 生成医学图像 Latent 空间中的隐私保护方法 PLAN 原理StyleGAN 生成视网膜图k-SALSA 生成视网膜图PLAN方法 生成视网膜图 总结 PLAN 原理 论文&#xff1a;https://arxiv.org/abs/2307.02984 代码&#xff1a;https://github.com/perceivelab/P…

电商价格监测准确率如何保证

品牌做电商价格监测的前提是为了找出网络渠道中的破价链接&#xff0c;只有精准到筛选出破价链接&#xff0c;才能进行针对性的治理&#xff0c;比如经销渠道&#xff0c;只有当品牌拿出其破价的证据&#xff0c;才能对授权渠道进行规则管控&#xff0c;非授权渠道也是如此&…

HTML5与App封装技术将网站一键打包成App

HTML5&#xff1a;跨平台的利器HTML5作为一种先进的网页标记语言&#xff0c;其最大的优势在于跨平台性。开发者仅需编写一次代码&#xff0c;即可在各种操作系统和设备上运行&#xff0c;无需为每个平台单独开发App。这种“编写一次&#xff0c;运行处处”的模式&#xff0c;大…

系统架构15 - 软件工程(3)

软件过程模型 瀑布模型特点缺点 原型化模型特点两个阶段不同类型注意 螺旋模型V 模型特点 增量模型特点 喷泉模型基于构件的开发模型(CBSD)形式化方法模型敏捷模型特点“适应性” (adaptive) 而非“预设性” (predictive)“面向人的” (People-oriented) 而非“面向过程的” (P…

如何使用 WebRTC 与 Kurento 建立视频会议 App

本文作者 WebRTC Ventures 工程师。在 RTC 2018 实时互联网大会上&#xff0c;WebRTC Ventures 的资深软件工程师&#xff0c;将围绕 WebRTC 开发带来经验分享。欢迎访问RTC 开发者社区&#xff0c;与更多WebRTC开发者交流经验。 了解 WebRTC 如何工作的一种简单方式是通过学习…

golang入门

学习方法 1、在实践中学 2、适当的囫囵吞枣&#xff0c;有可能学到后面&#xff0c;对前面的疑问焕然大悟 3、注重整体&#xff0c;刚开始不要去扣细节 安装 需要配置3个环境变量&#xff0c;如果.msi文件安装时设置好了就不需要了&#xff0c;自己可以检查下 GOROOT&…

VUE--VUEX

一、什么是Vuex Vuex就是一个vue的状态&#xff08;数据&#xff09;管理工具&#xff0c;是vue项目实现大范围数据共享的技术方案。能够方便、高效的实现组件之间的数据共享。 Vuex的好处&#xff1a; &#xff08;1&#xff09;数据的存储一步到位&#xff0c;不需要层层传递…

权威媒体报道 | 百分点科技谈“数据要素×”

近日&#xff0c;国家数据局等17部门联合印发《“数据要素”三年行动计划&#xff08;2024—2026年&#xff09;》&#xff0c;引起广泛关注&#xff0c;作为数据要素技术厂商代表&#xff0c;百分点科技CTO刘译璟接受经济日报、中国高新技术产业导报采访&#xff0c;结合产业现…

<蓝桥杯软件赛>零基础备赛20周--第17周--并查集

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周。 在QQ群上交流答疑&am…