去除隐藏小程序右侧滚动条的两种方法

2024年4月20日 互联网

这是一篇追求完美的杠精文章

在测试小程序布局时会出现，滚动条穿透的现象，如图

👆某团的滚动条已穿透顶部自定义导航栏

自定义导航栏 一定要用 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

用了文中的方法但没有任何效果，大家可以试一试，踩对坑了别忘分享哦～

 

 

 

 

最新文章