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

news/2024/7/20 1:24:04 标签: 微信小程序, 小程序

注释很详细,直接上代码

上一篇

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

相关文章

如何让你的.NET WebAPI程序支持HTTP3?

下面我将总结构建Http3的经验&#xff0c;以Token Gateway的项目为例&#xff0c;请注意使用Http3之前你需要知道它的限制&#xff0c; Windows Windows 11 版本 22000 或更高版本/Windows Server 2022。 TLS 1.3 或更高版本的连接。 Linux 已安装 libmsquic 包。 实现讲解 …

聚道云连接器助力钉钉与金蝶云星辰无缝对接,实现多维度数据同步

客户介绍 某企业服务有限公司专注于为企业提供全方位、高质量的企业服务&#xff0c;致力于于企业管理咨询、企业形象策划、市场营销策划、财务管理咨询等方面。该公司拥有一支经验丰富、专业化的团队&#xff0c;他们深入了解企业需求&#xff0c;为客户提供个性化的解决方案…

docker(第二部分)

来自尚硅谷杨哥 少一点胡思乱想&#xff0c;心中无女人&#xff0c;编码自然神&#xff0c;忘掉心上人&#xff0c;抬手灭红尘。人间清醒&#xff0c;赚钱第一。好好学习&#xff0c;天天向上。听懂六六六。 7.Dokcer容器数据卷 1,&#xff09;坑&#xff1a;容器卷记得加入 …

docker之部署青龙面板

青龙面板是一个用于管理和监控 Linux 服务器的工具&#xff0c;具有定时运行脚本任务的功能。在实际情况下也可以用于一些定期自动签到等任务脚本的运行。 本次记录下简单的安装与使用&#xff0c;请提前安装好docker&#xff0c;参考之前的文章。 一、安装部署 1、拉取镜像 # …

智能充电桩,机器人 wifi蓝牙 解决方案

新联鑫威低功耗高性价比sdio wifi/蓝牙combo的模块单频2.4g的CYWL6208&#xff0c;双频2.4g/5g CYWL6312可以应用到一些低延时 高性能 低功耗 联网需求的交流直流充电桩&#xff0c;扭力扳手&#xff0c;agv机器人&#xff0c;目前支持主流的stm32F4/GD32F4 瑞萨 psoc的主控&am…

Angular封装HttpClient文件下载

Angular HttpClient 文件下载 前言HttpRequest.tsdemo后端接口koa2示例功能优化实现下载进度监控 前言 使用Angular框架开发工作中&#xff0c;实现文件下载业务时&#xff0c;我们可以使用Angular自带的HttpClient。下面我们就封装一下HttpClient实现文件下载&#xff0c;当接…

【硅谷甄选】强制使用 pnpm 包管理器工具

强制使用pnpm包管理器工具 团队开发项目的时候&#xff0c;需要统一包管理器工具&#xff0c;因为不同包管理器工具下载同一个依赖&#xff0c;可能版本不一样&#xff0c;导致项目出现bug问题&#xff0c;因此包管理器工具需要统一管理。 在根目录创建scripts/preinstall.js…

【Pytorch 第一讲】 如何加载预训练模型

一. 封装Pytorch的Model 加载pre-trianed Model import torch import torchvision.models as models from torchvision import transforms# 1. 下载并加载预训练模型 model models.resnet18(pretrainedFalse) # 设置pretrainedFalse&#xff0c;表示不加载预训练权重# 2. 下载…