【报Bug】uniapp使用scroll-view滚动条消失，无法出现

yangzhuowen (作者)

不是，原来我的uniapp项目默认是带滚动条的，而且我当时还费劲心思隐藏他，现在不带了吗？我只能用这种方法加上，很丑.scroll-Y {

height: 100%;

    ::v-deep ::-webkit-scrollbar {  

        /* 滚动条整体样式 */  

        display: block !important;  

    }  



    ::v-deep ::-webkit-scrollbar-thumb {  

        /* 滚动条里面小方块 */  

        border-radius: 10rpx !important;  

        box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;  

        background-color: #a9a9a9 !important;  

    }  

}

2023-10-09 16:09

彼岸星光

那不是nvue页面怎么显示出来呢，还是这真就是个bug呀

2024-01-24 14:37

爱豆豆

回复 yangzhuowen: 你隐藏的应该是h5端的滚动条

2024-01-24 15:05

爱豆豆

回复 彼岸星光: 用上面的css代码试试 或者你自己模拟一个出来

2024-01-24 15:08

爱豆豆

我写了一个 给你提供个思路 你参考下我的代码

<template>  

    <view >  

        <view style="position: relative;background-color: pink;width: 90vw;height: 300rpx;">  

            <view class="scrollbar">  

                <view class="scrollbar_box" :style="{  

                    left:scrollLeft + '%'  

                }"></view>  

            </view>  

            <scroll-view @scroll="scroll" scroll-x show-scrollbar style="height: 100%;white-space: nowrap;">  

                <view style="display: inline-block;" v-for="(item,index) in 100" :key="index">{{item}}</view>  

            </scroll-view>  

        </view>  

    </view>  

</template>  

<script setup>  

    import {ref} from 'vue'  

    let scrollLeft = ref(0)  

    const scroll = (event) => {  

        scrollLeft.value = percentage(event.detail.scrollLeft,event.detail.scrollWidth)  

    }  

    const percentage = (val, total) => {  

            if (val == 0 || total == 0) {  

                return 0;  

            }  

            let i = (Math.round(val / total * 10000) / 100.00)  

            if (i > 100) {  

                return 100; // 小数点后两位百分比  

            } else if (i <= 100 && i >= 0) {  

                return i; // 小数点后两位百分比  

            } else {  

                return 0; // 小数点后两位百分比  

            }  

        }  

</script>  



<style>  

    .scrollbar {  

        z-index: 1;  

        position: absolute;  

        overflow: hidden;  

        left: 0;  

        bottom: 0;  

        height: 20rpx;  

        width:  100%;  

        border-radius: 20rpx;  

        background-color: #d6ffea;  

    }  

    .scrollbar_box {  

        position: absolute;  

        width: 20%;  

        height: 100%;  

        background-color: springgreen;  

        border-radius: 20rpx;  

        bottom: 0%;  

    }  



</style>  

2024-01-24 15:24

彼岸星光

回复 爱豆豆: 好的多谢大佬小姐姐，我抽空试试，为啥不能私信你呢？

2024-01-24 17:02

爱豆豆

回复 彼岸星光: 我也不清楚 我也不能私信别人

2024-01-24 17:06

彼岸星光

回复 爱豆豆: 噢噢，我看到设置里的私信设置有，默认是所有人，你私信我看看撒~

2024-01-24 17:53

彼岸星光

回复 爱豆豆: 小姐姐好厉害噢！显示的滚动条还那么漂亮！！

2024-01-25 16:35