uni-app中scroll-view的show-scrollbar设置为true时滚动条不显示
uni-app中scroll-view的show-scrollbar设置为true时滚动条不显示
谷歌百度别人都是隐藏不了滚动条，我这里死活显示不了滚动条，各种方法都试了无果，疑似 bug.
如官网介绍： show-scrollbar Boolean false 控制是否出现滚动条 App-nvue 2.1.5+
官方提供示例： https://hellouniapp.dcloud.net.cn/pages/component/scroll-view/scroll-view
我的问题代码：
<template>
<view class="content">
<view class="">
<scroll-view :show-scrollbar="true" class="recommend_cake" scroll-x="true">
<view id="demo1" class="scroll-view-item_H uni-bg-red"></view>
<view id="demo2" class="scroll-view-item_H uni-bg-green"></view>
<view id="demo3" class="scroll-view-item_H uni-bg-blue"></view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello1'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss">
.recommend_cake {
white-space: nowrap;
width: 800upx;
}
.uni-bg-red {
background-color: #f76260;
}
.uni-bg-green {
background-color: #09bb07;
}
.uni-bg-blue {
background-color: #007aff;
}
.scroll-view-item_H {
display: inline-block;
width: 100%;
height: 500upx;
}
</style> 
8 回复
给我整笑了，同样的代码换了个版本就显示滚动条了，新问题就是 show-scrollbar 无论设置为 true 和 false 都不能隐藏滚动条，合着这属性就是摆设。
在 uni-app 中使用 scroll-view 组件时，如果你将 show-scrollbar 属性设置为 true，但滚动条仍然不显示，可能是由于以下原因：
1. 平台差异
show-scrollbar属性在某些平台上可能不支持或表现不一致。例如，在微信小程序中，show-scrollbar可能不会生效。- 你可以通过
uni.getSystemInfoSync()获取当前平台信息，并根据平台特性进行适配。
2. 样式问题
- 确保
scroll-view的父容器和scroll-view本身有足够的空间来显示滚动条。如果scroll-view的内容不足以触发滚动，滚动条也不会显示。 - 检查是否有自定义样式覆盖了滚动条的显示，例如
overflow: hidden或::-webkit-scrollbar相关的样式。
3. 内容不足
- 如果
scroll-view的内容不足以触发滚动，滚动条也不会显示。你可以通过增加内容或设置scroll-view的高度来确保内容超出容器。
4. 版本问题
- 确保你使用的
uni-app版本是最新的，旧版本可能存在一些 bug 或兼容性问题。
5. 平台特定配置
- 在某些平台上，可能需要额外的配置来显示滚动条。例如，在微信小程序中，可能需要使用
scroll-x或scroll-y属性来控制滚动方向。
示例代码
<template>
<scroll-view
scroll-y
show-scrollbar="true"
style="height: 300px; border: 1px solid #ccc;"
>
<view v-for="i in 20" :key="i" style="padding: 10px;">Item {{ i }}</view>
</scroll-view>
</template>
<script>
export default {
data() {
return {};
},
};
</script>