uniapp动态插槽打包成小程序不生效?

最近写uniapp打包成h5和微信小程序端,在使用插槽时遇到了各种问题,记录一下

  1. 动态插槽在小程序不生效,
  2. 使用插槽,小程序端样式错乱,
  3. 使用v-if语法,插槽默认值不生效

1. 动态插槽在小程序不生效

定义插槽

js 复制代码
// #ifdef H5
<slot :name="`content-${index}`"></slot>
// #endif 
// #ifdef MP-WEIXIN
<slot name="content-{{index}}"></slot>
// #endif

使用插槽

js 复制代码
// #ifdef H5
<template
   v-for="(item, index) in formData"
   v-slot:[`content-${index}`]
   :key="item.id"
>
// #endif 
// #ifdef MP-WEIXIN
<view
   v-for="(item, index) in formData"
   slot="content-{{index}}"
   :key="item.id"
>
// #endif

按网上的方法,还是不显示,我把template改成view就显示可以了。

2. 使用插槽,小程序端样式错乱

小程序在使用插槽时会默认在最外层加view,在使用时发现默认插槽加上#default也会,可能就会导致样式错乱。

默认插槽通过以下写法可以避免包裹一层view,不过最外层还是会有一层组件名路径的标签,如果还是错乱,还是要通过另外写样式来兼容

如果是具名插槽,也只能另外写样式处理,目前没找到好的解决方案

js 复制代码
// #ifdef H5
<template #default>
// #endif
// #ifdef MP-WEIXIN
<template>
// #endif 

3.使用v-if语法,插槽默认值不生效

遍历展示时,有的数据需要使用插槽,有的不需要

一开始我是这样写的,结果所有的数据都有slot标签,只是有的是空的,默认值就展示不出来

js 复制代码
<Cell v-for="item in formData">
  <template v-if="item.type"></template>
</Cell>

只能通过以下方式写,但增加了代码量,如果遇上更复杂的插槽会更麻烦,也是没找到好的解决方案

js 复制代码
<view v-for="item in formData">
  <Cell v-if="item.type">
    <template></template>
  </Cell>
  <Cell v-else>
    <template ></template>
  </Cell>
</view>

纯做记录,如果jy们有好的方案,欢迎评论

相关推荐
SY_FC1 小时前
uniapp阿里云验证码使用
阿里云·uni-app·notepad++
—Qeyser2 小时前
好看的背景颜色 uniapp+小程序
小程序·uni-app·uniapp·微信小游戏
2501_916008892 小时前
uni-app iOS 日志与崩溃分析全流程 多工具协作的实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915921434 小时前
iOS混淆工具实战 在线教育直播类 App 的课程与互动安全防护
android·安全·ios·小程序·uni-app·iphone·webview
织_网6 小时前
UniApp 页面通讯方案全解析:从 API 到状态管理的最佳实践
前端·javascript·uni-app
yuehua_zhang7 小时前
uni app 的app端 写入运行日志到指定文件夹。
前端·javascript·uni-app
2501_915106327 小时前
Charles抓包工具在接口性能优化与压力测试中的实用方法
ios·性能优化·小程序·https·uni-app·压力测试·webview
2501_915909061 天前
uni-app iOS 上架常见问题与解决方案,实战经验全解析
android·ios·小程序·https·uni-app·iphone·webview
编程猪猪侠1 天前
uni-app与Vue3,实现3D圆柱形旋转画廊效果
3d·uni-app
BUG创建者1 天前
uniapp vue页面传参到webview.nvue页面的html或者另一vue中
vue.js·uni-app·html