微信小程序scroll-view的滚动条显示不了？

Question

问题描述

需求想要展示自定义横向滚动条，但是用sroll-view发现无法显示滚动条，一开始不加scroll-view, 只有一层view，设置overflow-x:scroll， 也是可以滚动但是不显示滚动条。在开发者工具和真机调试都不显示。平时比较少写小程序，麻烦大佬解答一下。
wxml:

<scroll-view scroll-x class="scrollNav" show-scrollbar enhanced>  <view class="homeNavList">    <block wx:for="{{rooms}}" wx:key="index">      <view class='homeNavListItem'>      </view>    </block>  </view></scroll-view>

wxss:

.homeNavList {  display: flex;  flex-direction: column;  flex-wrap: wrap;  /* width: 100%; */  margin-bottom: 20rpx;  height: 300rpx;  /* overflow-x: scroll; */}/* 下面的css写不写都展示不了 */.scrollNav {  position: relative;}.scrollNav::-webkit-scrollbar {  position: absolute;  height: 6rpx;}/* 轨道 */.scrollNav::-webkit-scrollbar-track {  background-color: #eeeeee;  margin: 0 345rpx;}/* 滑块 */.scrollNav::-webkit-scrollbar-thumb {  background-color: #25d8a6;}.homeNavListItem {  display: inline-flex;  flex-direction: column;  align-items: center;  position: relative;  margin: 1% 0;  height: 130px;  min-width: 20%;}

Answer 1

微信小程序的 scroll-view 不支持修改滚动条样式，可以考虑改用 view + overflow-x: scroll 或者监听 scroll-view 的 scroll 事件自定义滚动条。

• view + overflow-x: scroll 实现：

<view class="scroller">  <!-- 内容 --></view>

.scroller {  display: flex;  flex-direction: row;  overflow-x: scroll;}.scroller::-webkit-scrollbar {  height: 16rpx;}.scroller::-webkit-scrollbar-thumb {  background-color: #888888;  border-radius: 10rpx;}.scroller::-webkit-scrollbar-track {  background-color: #f0f0f0;  border-radius: 10rpx;}

Answer 2

你调试一下可能被隐藏了；
设置一下高度看看：

<scroll-view scroll-y="true" style="height: 100%" scrollbar="true">  </scroll-view>