微信小程序(十六)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>

效果演示

相关推荐
走,带你去玩1 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉1 小时前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序
一笑code2 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
菌菇汤3 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
CC同学呀10 小时前
从0到100:单位订餐统计小程序开发日记2025
小程序
666HZ66616 小时前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
二十十十十十16 小时前
微信点餐小程序—美食物
微信·小程序
向明天乄16 小时前
在小程序中实现实时聊天:WebSocket最佳实践
websocket·网络协议·小程序
h1853859224416 小时前
租车小程序电动车租赁小程序php方案
小程序
海的诗篇_17 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html