还是无效,请问还有其他办法吗
时间: 2023-07-27 10:16:05 浏览: 123
如果以上方法都无效,您可以尝试使用 JavaScript 来动态修改 `scroll-view` 组件的样式,从而实现隐藏滚动条的效果。具体做法如下:
```html
<scroll-view class="scroll-view" scroll-y="true" bindscroll="onScroll">
<!-- scroll-view 的内容 -->
</scroll-view>
```
```css
/* 在 iOS 上显示滚动条 */
.scroll-view::-webkit-scrollbar {
width: 5px;
}
.scroll-view::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0);
}
.scroll-view::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
```
```javascript
Page({
onScroll() {
// 在滚动时动态修改样式,隐藏滚动条
wx.createSelectorQuery().select('.scroll-view').boundingClientRect(rect => {
wx.createSelectorQuery().select('.scroll-view::-webkit-scrollbar').boundingClientRect(scrollbarRect => {
let diff = rect.height - scrollbarRect.height;
if (diff > 0) {
// 隐藏滚动条
this.setData({
'scrollviewStyle': `height: ${rect.height - scrollbarRect.height}px; overflow-y: hidden;`
});
} else {
// 显示滚动条
this.setData({
'scrollviewStyle': ''
});
}
}).exec();
}).exec();
}
});
```
这里使用了 `bindscroll` 绑定了 `onScroll` 方法,在滚动时动态修改 `scroll-view` 组件的样式。当 `scroll-view` 的高度大于滚动条的高度时,隐藏滚动条;否则,显示滚动条。在 `scroll-view` 中添加了 `scrollviewStyle` 属性,用于动态修改样式。
希望这个方法能够解决您的问题。
阅读全文