传播星球
传播星球
  • 发布:2024-08-26 10:57
  • 更新:2024-08-26 14:59
  • 阅读:150

scroll-view 滚动条怎么一直显示

分类:uni-app

有个需求让滚动条一直显示,scroll-view滑动的时候才显示,怎么让他一直显示

2024-08-26 10:57 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

那个端?h5是可以一直显示的
或者你就自己模拟一个滚动条
参考示例

<template>  
    <view>  
        <view style="position: relative;background-color: pink;width: 100vw;height: 500rpx;">  
            <view class="scrollbar">  
                <view class="scrollbar_box" :style="{    
                    top:scrollTop + '%'    
                }"></view>  
            </view>  
            <scroll-view @scroll="scroll" scroll-y show-scrollbar style="height: 100%;">  
                <view v-for="(item,index) in 100" :key="index">{{item}}</view>  
            </scroll-view>  
        </view>  
    </view>  
</template>  

<script setup>  
    import {  
        ref  
    } from 'vue'  
    let scrollTop = ref(0)  
    const scroll = (event) => {  
        scrollTop.value = percentage(event.detail.scrollTop, event.detail.scrollHeight - uni.upx2px(500))  
    }  
    const percentage = (val, total) => {  
        if (val == 0 || total == 0) {  
            return 0;  
        }  
        let i = (Math.round(val / total * 10000) / 100.00)  
        //96是随便写的 写100的话滚动到底会超出一个滚动指示的高度   
        //你可以计算下滚动指示 的高度所占 整体高的的百分比 使用100-滚动指示百分比 就是实际最大百分比   
        if (i > 96) {  
            return 96; // 小数点后两位百分比    
        } else if (i <= 96 && i >= 0) {  
            return i; // 小数点后两位百分比    
        } else {  
            return 0; // 小数点后两位百分比    
        }  
    }  
</script>  

<style>  
    .scrollbar {  
        z-index: 1;  
        position: absolute;  
        overflow: hidden;  
        right: 0;  
        top: 0;  
        height: 500rpx;  
        width: 20rpx;  
        border-radius: 20rpx;  
        background-color: #d6ffea;  

    }  

    .scrollbar_box {  
        position: absolute;  
        width: 100%;  
        height: 20rpx;  
        background-color: springgreen;  
        border-radius: 20rpx;  
        bottom: 0%;  

    }  
</style>

要回复问题请先登录注册