4***@qq.com
4***@qq.com
  • 发布:2022-04-14 21:05
  • 更新:2022-05-19 21:42
  • 阅读:446

scroll-view show-scrollbar 设置为 true 不能显示滚动条

分类:uni-app

谷歌百度别人都是隐藏不了滚动条,我这里死活显示不了滚动条,各种方法都试了无果,疑似 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">  
<!-- <scroll-view show-scrollbar="true" class="recommend_cake" scroll-x="true">  
            <scroll-view show-scrollbar 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>  
2022-04-14 21:05 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

show-scrollbar 仅支持App-nvue

4***@qq.com

4***@qq.com (作者)

给我整笑了,同样的代码换了个版本就显示滚动条了,新问题就是 show-scrollbar 无论设置为 true 和 false 都不能隐藏滚动条,合着这属性就是摆设。

DCloud_UNI_Anne

DCloud_UNI_Anne

未复现此问题,你的代码里有些css nvue不支持,注意调整下,升级至HX3.4.5-alpha版本试下

l***@qq.com

l***@qq.com

看看是否哪里有伪元素覆盖掉了

:-webkit-scrollbar{ display:none;
}

要回复问题请先登录注册