本文主要是介绍去除隐藏小程序右侧滚动条的两种方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
这是一篇追求完美的杠精文章
在测试小程序布局时会出现，滚动条穿透的现象，如图
👆某团的滚动条已穿透顶部自定义导航栏
自定义导航栏 一定要用 cover-view、 一定要用 cover-view 、一定要用 cover-view
或是 在一些不需要滚动条 提示页面长度的情况下显示滚动条 这就很难受
所以总结了两个目前确定能用的方法：
1、使用cover-view标签覆盖滚动条
2、使用scroll-view标签绕过滚动条
但各个方法都有各自的局限性
下面进入正题
1、用图层覆盖滚动条
cover-view 标签 在模拟器中虽被滚动条穿透 但真机实测中可以覆盖右侧滚动条
毕竟人家牛逼到能覆盖原生组件之上的
cover-view 官方介绍 https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
上呆🐎
页面 wxml
<!-- 覆盖滚动条 -->
<cover-view class='hsb' /><!-- 内容 -->
<view class='box'><block wx:for='{{list}}' wx:key='index'><view class='item' style='background:{{item}}' /></block>
</view>页面 wxss
/* 覆盖滚动条 */
.hsb {width: 6px;height: 100%;position: fixed;top: 0;right: 0;background: #fff;
}/* 内容盒子 */
.box {padding: 0 10px;
}/* 内容 */
.item {width: 100%;height: 80px;border-radius: 10px;margin: 0 0 10px;opacity: 0.4;
}
页面 js
Page({/*** 生命周期函数--监听页面加载*/onLoad: function(options) {// 获取随机颜色function num() {let num = new String()for (let i = 0; i < 6; i++) {num += Math.floor(Math.random() * 10)}return '#' + num}// 获取随机颜色数组let arr = new Array()for (let i = 0; i < 20; i++) {arr.push(num())}// 视图传值this.setData({list: arr})}})效果
注：模拟器仍会显示滚动条 但真机已没有滚动条显示
优点：在部分爷爷机上 页面滚动相比用scroll-view标签 滚动会顺畅一些 ,不容易发生内容抖动
缺点：右侧6px宽度已经完全遮住，无法显示全宽度，对界面设计风格有要求
2、绕过页面滚动条
只要内容高度不超过窗口高度就不会显示页面的滚动条
所以设置scroll-view高度等于窗口高度即可，而scroll-view的滚动条可以通过代码设置隐藏
scroll-view 官方介绍 https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
上呆🐎
页面wxml
<scroll-view scroll-y style='height:{{h}}px' ><view class='box'><block wx:for='{{list}}' wx:key='index'><view class='item' style='background:{{item}}' /></block></view>
</scroll-view>页面wxss
/* 隐藏滚动条 */
::-webkit-scrollbar {width: 0;height: 0;color: transparent;
}.box {padding: 0 10px;
}.item {width: 100%;height: 80px;border-radius: 10px;margin: 0 0 10px;opacity: 0.4;
}
页面js
const app = getApp()
Page({data: {h: app.system.windowHeight - 1 //窗口高度 必须-1px 否则某些情况会显示滚动条},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {// 获取随机颜色function num() {let num = new String()for (let i = 0; i < 6; i++) {num += Math.floor(Math.random() * 10)}return '#' + num}// 获取随机颜色数组let arr = new Array()for (let i = 0; i < 20; i++) {arr.push(num())}// 视图传值this.setData({list: arr})}
})app.js
App({globalData: {},onLaunch: function() {//获取系统信息wx.getSystemInfo({success: res => {this.system = res}})}
})效果略
注：页面js中 h = app.system.windowHeight - 1 的原因，
很奇葩的地方是：不减1px 在模拟器上会显示滚动条 真机不显示；减1px后 模拟器上、真机上都不会显示滚动条
而实测减1px高度对界面没有任何影响，规定统一减1px
优点：界面完全可用
缺点：部分机型视觉上可能会掉帧、抖动
这两种方法各有利弊，开发过程中，如某个页面确实需要隐藏滚动条，可根据不同的特点选择最优方案
另外我在微信小程序社区问了该问题，但官方的社区技术运营专员给我一个链接参考
地址 https://developers.weixin.qq.com/community/develop/doc/000a024b1a41905d509ac7f1055400
用了文中的方法但没有任何效果，大家可以试一试，踩对坑了别忘分享哦～
这篇关于去除隐藏小程序右侧滚动条的两种方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
