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_915106321 天前
iOS App 测试工具全景分析,构建从开发调试到线上监控的多阶段工具链体系
android·测试工具·ios·小程序·uni-app·iphone·webview
dchen771 天前
uniapp实现上拉刷新和下拉刷新的两种方式
uni-app
FinelyYang1 天前
uniapp+unipush2.0+WebRTC实现h5一对一视频通话
uni-app·音视频·webrtc
天蓝色的鱼鱼1 天前
mescroll老用户亲测z-paging:这些功能让我果断切换!
前端·uni-app
anyup1 天前
🔥100+ 天,已全面支持鸿蒙!uView Pro 近期更新盘点及未来计划
前端·uni-app·harmonyos
半兽先生2 天前
uniapp高性能ui框架uni-ui
ui·uni-app
qq_316837752 天前
uniapp 观察列表每个元素的曝光时间
前端·javascript·uni-app
iOS阿玮2 天前
打个广告,帮忙招一个iOS开发的扛把子~
uni-app·app·apple
Cerrda2 天前
🌟让你的uniapp应用拥有更现代的交互体验,一个支持滚动渐变透明的导航栏组件🌟
uni-app
2501_916007472 天前
iOS 应用性能测试的工程化流程,构建从指标采集到问题归因的多工具协同测试体系
android·ios·小程序·https·uni-app·iphone·webview