这是一篇追求完美的杠精文章
在测试小程序布局时会出现，滚动条穿透的现象，如图
👆某团的滚动条已穿透顶部自定义导航栏
自定义导航栏 一定要用 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
用了文中的方法但没有任何效果，大家可以试一试，踩对坑了别忘分享哦～
