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

注释很详细,直接上代码

上一篇

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

源码:

myNav.wxml

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

index.wxml

xml 复制代码
<myNav custom-class="color-pink">
<text>🍉</text>
</myNav>

注意事项:没有注意事项
效果演示:

多个卡槽

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

myNav.js

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

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

myNav.wxml

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

index.wxml

xml 复制代码
<myNav custom-class="color-pink">
<text slot="left">🍉</text>
<text slot="right">🐼</text>
</myNav>

效果演示

相关推荐
Ama_tor2 小时前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
毛毛三由11 小时前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++
一只一只妖13 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
编程毕设14 小时前
基于小程序的智能停车管理系统设计与开发
小程序
Kelaru16 小时前
本地Qwen中医问诊小程序系统开发
python·ai·小程序·flask·project
初晨未凉17 小时前
uniapp返回webview返回小程序并且跳转回webview
小程序·uni-app
Python智慧行囊20 小时前
微信小程序交互精髓:点击操作与状态管理实战
微信小程序·小程序·交互
铲子Zzz1 天前
Java使用接口AES进行加密+微信小程序接收解密
java·开发语言·微信小程序
paopaokaka_luck2 天前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序