思路:(以隐藏横行滚动条为例)
在原有盒子的基础上,外层套一个盒子,设置一个高度,超出隐藏,原有盒子的高度大于外层盒子的高度即可
代码如下:
html部分:
<
div
class=
"hidden-bar"
>
<
ul
class=
"list-item-group"
>
<
li
class=
"list-item relative"
v-for="(
item,
index)
in
eyeShadowImgList"
:key="
item.
index"
:class="
item.
class"
@click="
TryMakeup(
item,
1,
index)"
>
<
img
:src="
item.
imgUrl"
/>
<
span
class=
"overlay"
v-if="
loadDataStatus"
></
span
>
</
li
>
</
ul
>
</
div
>
Css部分:
.hidden-bar{
display:
inline-block;
overflow:
hidden;
width:
toRem(
594);
height:
calc(
17vw);
.list-item-group{
display:
inline-block;
width:
toRem(
569);
white-space:
nowrap;
overflow-x:
auto;
height:
calc(
17vw +
1px);
padding:
0
0
toRem(
30)
toRem(
25);
li
.list-item {
display:
inline-block;
margin-right:
toRem(
38);
width:
toRem(
80);
height:
toRem(
80);
border-radius:
toRem(
50);
overflow:
hidden;
img {
width:
toRem(
80);
height:
toRem(
80);
}
} }
}