微信小程序中使用slot插槽

1、slot: 组件的插槽是为了让我们封装的组件更具有扩展性
让使用者可以决定组价内部的一些内容到底展示什么
例如移动网站中的导航栏

2、

单个插槽的使用：

注意：在slot组件页面中slot可以是单标签也可以是双标签，而在页面使用时必须是双标签

<!--第一步：封装组件，components/slot/slot.wxml-->
<!--components/slot/slot.wxml-->
<view><text>我是标准的</text><!--下面是slot插槽（占位），用于承载组件引用时提供的子节点--><slot></slot>
</view>

<!--第二步：引入组件，pages/index/index.wxml-->
<view>
<!-- 下面这部分内容将被放置在组件 <slot> 的位置上 --><view>我是定制的内容</view>
</view>

3、多个插槽slot的使用

<!--第一步：封装组件，components/slot/slot.wxml-->
<view><text>我是标准的</text><!--下面是slot插槽（占位），用于承载组件引用时提供的子节点--><slot name="slot1"></slot><slot name="slot2"></slot>
</view>

一定要记得在js文件中启用插槽

// 第二步：启用插槽，components/slot/slot.js
Component({// 启用插槽options: {multipleSlots: true}
})

<!--第三步：引用组件，pages/index/index.wxml-->
<view>
<view slot="custom2">我是定制的内容2</view>
</view><view>
<!-- 下面这部分内容将被放置在组件 <slot> 的位置上 --><view slot="slot1">我是定制的内容1</view><view slot="slot2">我是定制的内容2</view>

微信小程序中使用slot插槽相关推荐

微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
微信小程序setinterval_微信小程序中setInterval的使用方法
微信小程序中setinterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
微信小程序中this指向作用域问题this.setData is not a function报错
在微信小程序中我们一般通过以下方式来修改data中的数据 this.setData({index1: e.detail.value}) 比如在函数里面修改数据 bindFaChange1: funct ...
在微信小程序中绘制图表（part2）
本期大纲 1.确定纵坐标的范围并绘制 2.根据真实数据绘制折线相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part3) 关注我的 github 项目查看完整代码. 确 ...
微信小程序中带参数返回上一页的方法总结（三种）
本篇文章给大家带来的内容是关于微信小程序中带参数返回上一页的方法总结(三种),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 方法一把当前页面数据放入本地缓存( wx.setStor ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
在微信小程序中使用字体图标
方法一:转化为base64 第一步:在阿里巴巴矢量图标库下载需要的图标 QQ截图20180316191514.png 点击下载代码,将下载后的download.zip解压第二步:进入https:// ...
在微信小程序中绘制图表（part3）
本期大纲 1.饼图绘制 2.如何添加动画效果 3.使用rollup构建项目相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part2) 关注我的 github 项目查看完 ...

微信小程序中使用slot插槽

单个插槽的使用：

微信小程序中使用slot插槽相关推荐

最新文章

热门文章