uni-app 插槽<slot>如果写上v-slot会导致插槽<slot>内的组件sticky失效
uni-app 插槽<slot>如果写上v-slot会导致插槽<slot>内的组件sticky失效
问题描述
插槽 <slot> 如果写上 v-slot，会导致插槽 <slot> 内的组件 sticky 失效。
这个组件是通用的，其他页面 sticky 没有问题，就这个页面 sticky 失效了。找了几个小时不同，最后把 v-slot 删了 sticky 就又有效果了。
应该是 uniapp 的 overflow 默认为 hidden 导致的，而 sticky 的父级设置为 overflow: hidden 会导致 sticky 失效。
写上 v-slot，会在组件外套一层 <view>，这个 view 的 overflow：hidden
没有写 v-slot 的效果
子组件
<template>
<Layout v-slot="slotProps">
(sticky值无效)
</Layout>
</template>
父组件
<template>
<view class="layout">
<slot :currentItem="currentItem"></slot>
</view>
</template>
如何解决
怎么才能把全局默认 overflow:hidden 修改呢
更多关于uni-app 插槽<slot>如果写上v-slot会导致插槽<slot>内的组件sticky失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
感谢反馈，这个是已知问题，下个alpha版本会修复，
临时解决方案，替换 /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-mp-compiler/dist/template/codegen.js 为附件文件
更多关于uni-app 插槽<slot>如果写上v-slot会导致插槽<slot>内的组件sticky失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个典型的CSS布局问题。当使用具名插槽或作用域插槽时，uni-app会在插槽内容外自动包裹一个<view>容器，该容器默认带有overflow: hidden样式，这会破坏sticky定位所需的滚动容器上下文。
解决方案有以下几种：
- 直接覆盖样式（推荐）：
::v-deep .uni-slot-wrapper {
overflow: visible !important;
}
- 在父组件中设置插槽容器的overflow：
.layout {
overflow: visible;
}
- 使用CSS变量全局修改：
:root {
--uni-overflow: visible;
}
- 在manifest.json中配置（H5端）：
{
"h5": {
"template": {
"overflow": "visible"
}
}
}