微信小程序 slot踩坑的解决
2019-04-01 20:19
561 查看
今天在使用微信小程序 component 里的 slot 时发现,当只用一个 slot 并且将 slot 命名后,页面中调用这个 slot 并不会加载进来。
研究尝试后发现,如果想要使用命名的方式调用单个 slot ,也需要像调用多个 slot 的方式 在 component/xxx.js 里开启多个 slot 的功能。下面看代码。
// component <view class='slot'> <view>哈哈哈哈哈哈哈哈</view> <slot name="after"></slot> </view> // index 页面 <d-slot> <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 --> <view slot="after">这里是插入到组件slot name="after"中的内容</view> </d-slot> //结果,此时界面上不会载入 slot
而当我把 slot 的name 删去时,slot 就能成功载入
// component <view class='slot'> <view>哈哈哈哈哈哈哈哈</view> <slot></slot> </view> // index 页面 <d-slot> <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 --> <view>这里是插入到组件slot name="after"中的内容</view> </d-slot> //结果,此时界面上载入 slot
或者不删去 name 而是在组件js中声明启用
// component.js Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, properties: { /* ... */ }, methods: { /* ... */ } }) // component <view class='slot'> <view>哈哈哈哈哈哈哈哈</view> <slot name="after"></slot> </view> // index 页面 <d-slot> <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 --> <view slot="after">这里是插入到组件slot name="after"中的内容</view> </d-slot> //结果,此时界面上载入 slot
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序 合法域名校验出错详解及解决办法
- 【微信小程序】合法域名校验出错,不在以下合法域名列表中 解决方法
- 微信小程序客服消息按钮太小解决方法contact-button
- 微信小程序解决视频在真机不能相对定位问题
- 微信小程序请求网络API 400错误的解决方法
- 微信小程序访问豆瓣电影api400错误解决方法
- 微信小程序 解决 view 文字 过多 溢出的问题,超过行数后隐藏显示省略号
- 微信小程序录音文件格式silk遇到的问题及解决方法
- 微信小程序Markdonw、HTML富文本内容显示解决办法
- 微信小程序支付签名失败,错误的解决方法,小程序支付签名paySign开发demo
- 微信小程序 解决swiper不显示图片的方法
- 微信小程序-双击长按触发longtap事件时同时触发tap事件解决办法
- 微信小程序常见问题->上传文件后如何在后台(php)获取文件名解决方法
- 17行代码解决微信小程序图片延迟加载
- 解决微信小程序要求的TLS版本必须大于等于1.2的问题
- 解决微信小程序中new Date()转换时间时间格式时IOS不兼容的问题
- 微信小程序tabBar 不显示底部菜单的原因和解决方法
- 微信小程序常见问题解决
- 微信小程序 解决 “生成 appservice 出错,请查看详细信息” 问题
- 微信小程序 免费SSL证书https、TLS版本问题的解决办法