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

相关推荐
hongweihao4 小时前
儿子不收拾玩具,我用AI给他量身定制开发一个APP,这下舒服了
uni-app·app·ai编程
Hashan4 小时前
微信小程序:扁平化的无限级树
前端·微信小程序·uni-app
小徐_23334 小时前
uni-app 无法实现全局 Toast?这个方法做到了!
前端·uni-app
xixixin_5 小时前
【HTML】在页面中画一条0.5px的线
前端·css·uni-app·html·css3
&白帝&6 小时前
Uniapp 自定义头部导航栏
前端·javascript·uni-app
&白帝&6 小时前
Uniapp 条件编译详解
uni-app
xkxnq12 小时前
uniapp跨端性能优化方案
uni-app
速易达网络12 小时前
基于UniApp的新大陆物联网平台温湿度检测系统开发方案
物联网·uni-app
har01d21 小时前
在 uniapp 里使用 unocss,vue3 + vite 项目
前端·uni-app·vue·uniapp·unocss
paopaokaka_luck21 小时前
校园快递小程序(腾讯地图API、二维码识别、Echarts图形化分析)
vue.js·spring boot·后端·小程序·uni-app