本来以为实现一个横向滚动的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;
}
米趣网免责声明
1、本站所有模板素材资源均来自用户分享和网络收集，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服，我们核实后会立即删除。2、米趣网作为第三方中介平台，依据交易合同（商品描述、交易前商定的内容）来保障交易的安全及买卖双方的权益。
3、非平台线上交易的项目，出现任何后果均与米趣网无关；无论卖家以何理由要求线下交易的，请联系管理举报。
注意事项
1、本站所有素材资源均来自用户分享和发布，部分未经测试可用，并不保证百分百无误及完整。2、素材资源仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
3、米趣网会对双方交易的过程及交易商品的快照进行永久存档，以确保交易的真实、有效、安全。
4、米趣网无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保，请买家自行鉴别。
