当前位置: 首页 > 编程笔记 >

微信小程序 slot踩坑的解决

公羊浩气
2023-03-14
本文向大家介绍微信小程序 slot踩坑的解决,包括了微信小程序 slot踩坑的解决的使用技巧和注意事项,需要的朋友参考一下

今天在使用微信小程序 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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍微信小程序组件生命周期的踩坑记录,包括了微信小程序组件生命周期的踩坑记录的使用技巧和注意事项,需要的朋友参考一下 组件生命周期,通常是我们业务逻辑开始的地方。 如果业务场景比较复杂,组件生命周期有不符合预期的表现时, 可能会导致一些诡异的业务bug,它们极难复现和修复。 组件 attached 生命周期执行次数 按照通常的理解,除moved/show/hide等生命周期可能多次执行外

  • 本文向大家介绍微信小程序调用wx.getImageInfo遇到的坑解决,包括了微信小程序调用wx.getImageInfo遇到的坑解决的使用技巧和注意事项,需要的朋友参考一下 这几天做到微信小程序详情页分享的功能,需要把原页面的一些参数带到分享页,然后在分享页需要获取图片的宽高等基本信息。 1.先说分享传参的方式: 在onShareAppMessage方法里面返回的path里面可以带参数传过去,具

  • 本文向大家介绍微信jssdk踩坑之签名错误invalid signature,包括了微信jssdk踩坑之签名错误invalid signature的使用技巧和注意事项,需要的朋友参考一下 最近做公众号网页开发,使用微信 jssdk 页面签名时 IOS 中一直报错,这才刚开始就被这只拦路虎拦住了,报错如下: 然而 Android 和开发者工具中好得很,没有任何问题: 既然提示 签名非法 ,那就是签名

  • 本文向大家介绍mpvue开发音频类小程序踩坑和建议详解,包括了mpvue开发音频类小程序踩坑和建议详解的使用技巧和注意事项,需要的朋友参考一下 这是我第一次开发小程序,开发的产品是音频类的,在大佬的建议下采用了 mpvue ,一周时间把功能都做出来,由于不太熟悉mpvue和微信小程序,足足用了一周时间来改bug才出来一个能用的版本,在这里整理分享下我开发时遇到的一些问题和给出一些建议。 在 Lin

  • 本文向大家介绍微信头像地址失效踩坑记附带解决方案,包括了微信头像地址失效踩坑记附带解决方案的使用技巧和注意事项,需要的朋友参考一下 微信头像失效问题说明? 最近工作遇到一个微信头像失效的问题,情况是这样的,我们一个h5页面在微信授权后打开,会存储微信相关昵称和头像信息,不过,我们没有保存图片到自己的服务器,而是仅仅存储微信头像地址,然而过了n多天后,用户在微信修改了自己的头像,这时候,我们的服务是

  • @megalo/target 的 platform 设置成 wechat,mini-css-extract-plugin 提取文件后缀改成微信小程序的 wxss。 const createMegaloTarget = require( '@megalo/target' ) const compiler = require( '@megalo/template-compiler' ) const M