本来以为实现一个横向滚动的view很简单,但是实际上还是有个小坑的。因为scroll-view本身的display:flex不生效。

scroll-view的内层view元素需要:

display: inline-block
scroll-view的外层元素需要:

white-space: nowrap

使得内部组件不换行。

再加上一些左右空行的渐变修饰,使得一个简单的横向滚动元素比较美观。

wxml:


<view class="skill-sequence-panel-content-wrapper">
<!--左边虚化-->
<view class="hide-content-box hide-content-box-left"></view>
<!--右边虚化-->
<view class="hide-content-box hide-content-box-right"></view>
<!--横向滚动-->
<scroll-view class="skill-sequence-panel-content" scroll-x>
<view class="skill-sequence-skill-wrapper"
wx:for="{{sequence}}" wx:key="{{index}}"
>
...
</view>
</scroll-view>
</view>

wxss:

/*scroll-view外层*/
.skill-sequence-panel-content-wrapper{
position: relative;
height: 55px;
white-space:nowrap;
padding: 2px 10px;
}
/*左右渐变遮罩*/
.hide-content-box{
position:absolute;
top:0;
height: 100%;
width:32px;
z-index: 2;
}
.hide-content-box-left{
left:0;
background-image: linear-gradient(to left,rgba(255,255,255,0) ,#f3f3f3 60%);
}
.hide-content-box-right{
right:0;
background-image: linear-gradient(to right,rgba(255,255,255,0) ,#f3f3f3 60%);
}
/*scroll-view本身*/
.skill-sequence-panel-content{
min-width:100%;
}
/*scroll-view内层*/
.skill-sequence-skill-wrapper{
margin-left: 2px;
display: inline-block;
}
/*设置空白以保持美观*/
.skill-sequence-panel-content .skill-sequence-skill-wrapper:first-child{
margin-left: 18px;
}
.skill-sequence-panel-content .skill-sequence-skill-wrapper:last-child{
margin-right: 16px;
}

 

发表评论

您的电子邮箱地址不会被公开。