解决小程序和app滚动条的问题--uniapp踩坑-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决小程序和app滚动条的问题--uniapp踩坑。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

这是uniapp官方提供的：

属性名	类型	默认值	说明	平台差异说明
show-scrollbar	Boolean	false	控制是否出现滚动条	App-nvue 2.1.5+

问题：

小程序和APP都是用使用scroll-view标签，代码相同，但是效果不同，就觉得很离谱，出现了两类情况，有种两权分立的感觉哈，下面是四种测试情况：

1）手机型号：iphone 12 系统版本：ios 15.6.1 小程序查看如图一正常无滚动条，而APP查看如图二滚动条出现

2）手机型号：iphone 13 系统版本：ios 15.6.1 小程序查看如图一正常无滚动条，而APP查看如图二滚动条出现

3）手机型号：Huawei p20 系统版本：harmonyOS 2.0.0 小程序查看如图二滚动条出现，而APP查看如图一正常无滚动条

4）手机型号：Redmi K20 pro 系统版本：MIUI 12.5.6 小程序查看如图二滚动条出现，而APP查看如图一正常无滚动条

图一：解决小程序和app滚动条的问题--uniapp踩坑图二：

<!-- 小程序和app都是使用同样代码 -->
<!-- 这里:show-scrollbar="false"不生效 -->
<scroll-view @scroll="changeScroll" :show-scrollbar="false" :enable-flex="true" :scroll-x="true" class="card_swiper">
	<view class="item" v-for="(item,index) in mallIndex" :key="index" @click="toDetailClassify(item.id,item.name,item)">
		<image mode="widthFix" class="item_img" :src="item.icon" />
		<view>{{item.name}}</view>
	</view>
</scroll-view>

方案：到这里觉得很离谱，又进了uniapp的坑，但也没办法还是要解决的，于是百度试了很多方法，还是下面这个方法好用有效

找到项目的App.vue文件在style标签里面添加如下代码，根据不同平台控制不同标签的属性。

<style lang='scss'>
	/*每个页面公共css */
	/* 解决小程序和app滚动条的问题 */
	/* #ifdef MP-WEIXIN || APP-PLUS */
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}
	/* #endif */

	/* 解决H5 的问题 */
	/* #ifdef H5 */
	uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}
	/* #endif */
</style>

最后运行测试：无论在小程序还是APP,无论什么手机都不再出现滚动条了，如图

解决小程序和app滚动条的问题--uniapp踩坑