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们有好的方案,欢迎评论

相关推荐
2501_916007478 小时前
HTTPS 抓包乱码怎么办?原因剖析、排查步骤与实战工具对策(HTTPS 抓包乱码、gzipbrotli、TLS 解密、iOS 抓包)
android·ios·小程序·https·uni-app·iphone·webview
Q_Q5110082858 小时前
python+django/flask+uniapp基于微信小程序的瑜伽体验课预约系统
spring boot·python·django·flask·uni-app·node.js·php
性野喜悲9 小时前
uniapp+<script setup lang=“ts“>解析后端返回的图片流并将二维码展示在页面中
uni-app
卷Java10 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
笨笨狗吞噬者12 小时前
【uniapp】小程序端实现分包异步化
前端·微信小程序·uni-app
2501_9160088914 小时前
HTTPS 双向认证抓包实战,原理、难点、工具与可操作的排查流程
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9151063214 小时前
HTTPS 能抓包吗?实战答案与逐步可行方案(HTTPS 抓包原理、证书Pinning双向认证应对、工具对比)
网络协议·http·ios·小程序·https·uni-app·iphone
游戏开发爱好者814 小时前
App HTTPS 抓包实战,原理、常见问题与可行工具路线(开发 测试 安全 角度)
网络协议·安全·ios·小程序·https·uni-app·iphone
2501_9151063214 小时前
App HTTPS 抓包实战指南,原理、常见阻碍、逐步排查与工具组合
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159214320 小时前
Charles 抓包 HTTPS 原理详解,从 CONNECT 到 SSL Proxying、常见问题与真机调试实战(含 Sniffmaster 补充方案)
android·网络协议·小程序·https·uni-app·iphone·ssl