微信小顺序scrollview横向转动的实践踩坑及隐蔽其转动条的完成

一、实践踩坑

项目运用mpvue开辟

1. scroll-view默许是不转动的。。所以要先设置scroll-x="true"或许scroll-y="true"

2. 在scroll-view内里增加定宽元素，凌驾scroll-view宽度（设置了100%，即屏幕宽度)后，它居然换行了。所以要scroll-view的款式要如许设置：

scroll-view {
width: 100%;
white-space: nowrap; // 不让它换行
}


3. 然后在定宽元素里边增加子容器：

// html也许长如许



// css响应就也许长如许
scroll-view {
display: flex;
flex-wrap: nowrap;
}
.tab-item {
display: flex;
justify-content: center;
width: 25%;
...
}

然后发明.tab-item并没有排在一行上。。申明scroll-view和.tab-item都设置display: flex无效？无法之下，只好在它外边再包一层，然后款式设置display: inline-block。此时准确姿态以下：

// html


到这里，scroll-view就基础如我所愿了，也许长如许：

二、隐蔽转动条

在网上搜了许多，都是说加上这段代码就可以够：

/*隐蔽转动条*/
::-webkit-scrollbar{
width: 0; height: 0; color: transparent;
}

或许有的人说如许子：

/*隐蔽转动条*/
::-webkit-scrollbar{
display: none;
}

1. 然则两种要领我都试过，scroll-view的转动条依旧存在。。测试机型是安卓机子。
2. 然则用display: none这类要领是能够隐蔽掉页面的转动条的，就是scroll-view的转动条没隐蔽掉。
3. 厥后，在小顺序社区看到官方职员如许子解答：

是的，就是这类野门路。固然 ，它下面的批评里也有人供应了另一种处理思绪要领，但我照样挑选了官方说的那种野门路要领。传送门
完成思绪就是，在scroll-view外边再包一个容器，它的高度小于scroll-view的高度，如许就会截掉转动条，到达隐蔽了转动条的结果。

// scss
.scroll-view-container { // 包裹scroll-view的容器
height: $fakeScrollHeight;
overflow: hidden; // 这个设置了就可以截掉转动条啦
scroll-view {
width: 100%;
white-space: nowrap;
}
}
.tab-container { // 我这里是用.tab-container来撑开scroll-view的高度，所以高度在它上面设置,加上padding，那末它就会比外层容器（.scroll-view-container）要高
display: inline-block;
width: 26%;
height: $fakeScrollHeight;
padding-bottom: $scrollBarHeight;
}

也许意义是如许：