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

news2024/10/2 16:14:53

注释很详细,直接上代码

上一篇

温馨提醒:此篇需要自定义组件的基础,如果不清楚请先看上一篇
新增内容:
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.coloradmin.cn/o/1412818.html

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

相关文章

【C++】C++入门基础讲解(一)

&#x1f497;个人主页&#x1f497; ⭐个人专栏——C学习⭐ &#x1f4ab;点击关注&#x1f929;一起学习C语言&#x1f4af;&#x1f4ab; 导读 经过一段时间的C语言学习&#xff0c;我们以及基本掌握了C语言的知识&#xff0c;今天&#xff0c;我们就开始学习C&#xff0c;…

网络安全相关知识点总结

网络安全背景 网络空间安全 --- Cyberspace 2003年美国提出网络空间的概念 --- 一个由信息基础设施组成的互相依赖的网络。 我国官方文件定义&#xff1a;网络空间为继海&#xff0c;陆&#xff0c;空&#xff0c;天以外的第五大人类活动领域 阶段的变化&#xff1a; 通信保密阶…

七通道NPN 达林顿管GC2003,应用于计算机,工业和消费类产品中

GC2003 内部集成了 7 个 NPN 达林顿晶体管&#xff0c;连接的阵列&#xff0c;非常适合逻辑接口电平数字电路&#xff08;例 如 TTL&#xff0c;CMOS 或PMOS 上/NMOS&#xff09;和较高的电流/电压&#xff0c;如电灯电磁阀&#xff0c;继电器&#xff0c;打印机或其他类似的负…

Android App开发基础(1)—— App的开发特点

本文介绍基于Android系统的App开发常识&#xff0c;包括以下几个方面&#xff1a;App开发与其他软件开发有什么不一样&#xff0c;App工程是怎样的组织结构又是怎样配置的&#xff0c;App开发的前后端分离设计是如何运作实现的&#xff0c;App的活动页面是如何创建又是如何跳转…

基于frp工具实现内网穿透,跨局域网远程SSH登录

文章目录 一.概述1.1 为什么要内网穿透&#xff1f;1.2 什么是frp&#xff1f; 二.frp安装管理流程2.1 frp下载2.2 部署2.3 通过systemd系统服务管理启动程序 三.frp配置测试&#xff08;通过SSH访问内网机器C&#xff09;3.1 服务端配置文件frps.toml修改3.2 客户端配置文件fr…

开源模型部署及使用

开源模型部署及使用 1.Langchain-Chatchat1.环境2.运行3.效果 2.facefusion1.环境2.运行3.效果 3.Aquila1.环境2.运行 1.Langchain-Chatchat Langchain-Chatchat这里面可以调用许多模型&#xff0c;我本地下载了chatglm3模型文件&#xff0c;所以就用这个模型。 1.环境 根据…

Python如何实现队列的同步实现

队列 q Queue.Queue(maxsize 10) 创建一个“队列”对象。Queue.Queue类即是一个队列的同步实现。队列长度可为或者有限。可通过Queue的构造函数的可选参数maxsize来设定队列长度。如果maxsize小于1就表示队列长度。 q.put()方法在队尾插入一个项目。put()有两个参数&#x…

解决Windows系统本地端口被占用

目录 一、被程序占用端口 1.通过终端杀掉占用端口的进程 2.任务管理器 二、被系统列为保留端口 前言&#xff1a; 首先了解为什么会出现端口被占用的情况 端口被占用的情况可能出现的原因有很多&#xff0c;主要有以下几点&#xff1a; 1.多个应用程序同时启动&…

如何对图片进行引用。

问题描述&#xff1a;如何对图片进行引用。 问题解答&#xff1a; 在图片描述处和图片标题处引用即可。

【C++11并发】mutex 笔记

简介 在多线程中往往需要访问临界资源&#xff0c;C11为我们提供了mutex等相关类来保护临界资源&#xff0c;保证某一时刻只有一个线程可以访问临界资源。主要包括各种mutex&#xff0c;他们的命名大都是xx_mutex。以及RAII风格的wrapper类&#xff0c;RAII就是一般在构造的时…

光伏设计——光伏合作的几种方式

鹧鸪云 随着光伏产业的发展&#xff0c;越来越多的企业和组织选择通过合作来提高效率、降低成本、实现共赢。以下是几种常见的光伏合作方式&#xff1a; 合资企业&#xff1a;合资企业是一种常见的合作方式&#xff0c;两个或多个公司共同出资、共同经营&#xff0c;共享利润和…

学习笔记-李沐动手学深度学习(四)(12-13,权重衰退、L2正则化、Dropout)

总结 【trick】过拟合及正则化项参数的理解 实际数据都有噪音&#xff0c;一般有噪音后&#xff0c;模型实际学习到的权重w就会比 理论上w的最优解&#xff08;即没有噪音时&#xff09;大。&#xff08;QA中讲的&#xff09; 【好问题】 &#xff08;1&#xff09;不使用正…

Java强训day4(选择题编程题)

选择题 接口中的方法是为了让重写编程题 题目 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int a_b sc.nextInt();int b_c sc.nextInt();int ab sc.nextInt();int bc sc.nextInt();for(in…

HttpHeaders 源码中headers成员变量为什么声明为final

源码如下 public class HttpHeaders implements MultiValueMap<String, String>, Serializable {private final Map<String, List<String>> headers;public String getFirst(String headerName) {List<String> headerValues (List)this.headers.get(…

THM学习笔记——OSI模型和TCP/IP模型

全是文字 比较枯燥 建议视频 OSI模型由七个层次组成&#xff1a; 第7层 -- 应用层&#xff1a; OSI模型的应用层主要为在计算机上运行的程序提供网络选项。它几乎专门与应用程序一起工作&#xff0c;为它们提供一个界面以用于传输数据。当数据传递到应用层时&#xff0c;它…

3dmax效果图渲染出现曝光怎么解决?

在使用3ds Max完成效果图渲染工作时&#xff0c;有时会遇到曝光过度的问题&#xff0c;这会使得渲染的图像出现光斑或者过亮&#xff0c;损害了效果的真实感和美观度。那么解决解决3dmax曝光问题呢&#xff1f;一起看看吧&#xff01; 3dmax效果图渲染出现曝光解决方法 1、相机…

yml配置文件怎么引用pom.xml中的属性

目录 前言配置测试 前言 配置文件中的一些参数有时要用到pom文件中的属性&#xff0c;做到pom文件变配置文件中也跟着变&#xff0c;那如何才能做到呢&#xff0c;下面咱们来一起探讨学习。 配置 1.首先要在pom.xml中做如下配置&#xff0c;让maven渲染src/main/resources下配…

YOLOv5全网独家首发:Powerful-IoU更好、更快的收敛IoU,效果秒杀CIoU、GIoU等 | 2024年最新IoU

💡💡💡本文独家改进:Powerful-IoU更好、更快的收敛IoU,是一种结合了目标尺寸自适应惩罚因子和基于锚框质量的梯度调节函数的损失函数 💡💡💡MS COCO和PASCAL VOC数据集实现涨点 收录 YOLOv5原创自研 https://blog.csdn.net/m0_63774211/category_1251193…

力扣1143. 最长公共子序列

动态规划 思路&#xff1a; 假设 dp[i][j] 是 text1[0:i] 和 text2[0:j] 最长公共子序列的长度&#xff1b;则 dp[0][j] 0&#xff0c;&#xff08;空字符串和任何字符串的最长公共子序列的长度都是 0&#xff09;&#xff1b;同理 dp[i][j] 0&#xff1b;状态转移方程&…

腾讯云服务器上发送邮件连接超时

腾讯云会将服务器25端口禁用&#xff08;腾讯云默认禁用&#xff09;&#xff0c;开启后发送正常 https://console.cloud.tencent.com/secctrl 参考 腾讯云服务器上发送邮件连接超时&#xff08;无法发送&#xff09;的相关问题