那个端?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>
1 个回复
爱豆豆 - 办法总比困难多
那个端?h5是可以一直显示的
或者你就自己模拟一个滚动条
参考示例