详细说明微信小程序滚动视图水平滚动的实践及隐藏滚动条的实现

第一，练习踩坑

该项目是使用mpvue开发的

1.默认情况下，滚动视图不滚动。因此，首先设置scroll-x='true '或scroll-y='true '

2.在滚动视图中添加一个固定宽度的元素，当它超过滚动视图宽度(设置为100%，即屏幕宽度)时，它实际上会换行。因此，滚动视图的样式应设置如下：

滚动视图{宽度： 100%；white-space : nowrap；//不要让它包装}3。然后在固定宽度元素内添加一个子容器：

//html看起来是这样的：scroll-view scroll-x=' true ' Div class=' tab-item ' img class=' content-icon '/Div/Div/Div Div class=' tab-item ' img class=' content-icon '/Div/Div/scroll-view//CSS相应地，scroll-view { display : flex；flex-wrap : nowrap；}.tab-item { display : flex；justice-content : center；宽度：25%；}并发现。tab项目不在一行中。解释滚动视图和。选项卡项设置display: flex无效？无奈之下，我不得不在它的外面包裹另一层，然后将样式设置为display: inline-block。这时，正确的姿势如下：

//html div class=' scroll-view-container ' scroll-view scroll-x=' true ' : scroll-in-view=' to view ' div class=' tab-container ' div class=' tab-item ' img cl Ass=' content-icon '/div/div/div/scroll-view/div//CSS变成这样的scroll-view { width 3360 100%；white-space : nowrap；//不要让它换行}。tab-容器{ display : inline-block；宽度：25%；}.tab-item { display : flex；flex-direction:柱；align-items:居中；在这里，滚动视图基本上就是我想要的，它看起来像这样：

其次，隐藏滚动条

我在网上搜索了很多，这意味着你可以添加这个代码：

/*隐藏滚动条*/:-WebKit-scroll bar { width : 0；高度： 0；color:透明；}或者有人这样说：

/*隐藏滚动条*/:-WebKit-scroll bar {显示：无；}不过这两种方法我都尝试过了，scroll-view的滚动条依然存在。测试模型是安卓。

但是使用display:没有一个可以隐藏页面的滚动条，也就是说，scroll-view的滚动条是不隐藏的。

后来在小程序社区，我看到官方的回答是这样的：

是的，这是疯狂的方式。当然，下面评论里也有人提供了另一种解决方案，但我还是选择了官方的野路子。入口

实现思路是在滚动条外包裹一个高度小于滚动条的容器，这样滚动条就可以被切掉隐藏起来。

//SCS。scroll-view-container {//包装scroll-view的容器height: $ fakeScrollHeight飞越：隐藏；//这个设置可以切断滚动条。滚动视图{宽度： 100%；white-space : nowrap；}} .tab-容器{//我使用。tab-container在此扩展滚动视图的高度，因此如果在上面设置了高度并添加了填充，它将高于外部容器(。滚动视图容器)。宽度：26%；height:美元fakeScrollHeightpadding-bottom : $ scrollBarHeight；}大概是这个意思：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。