微信小程序横向滑动列表

wxml

<text style='font-size:15px;padding:10px;'>横向滑动列表>>text>
<scroll-view scroll-x class="scroll-x">
  <view wx:for="{{list}}" wx:key="{{index}}" class="view-parent">
    <view class="view-item">{{item.txt}}view>
  view>
scroll-view>

wxss

.scroll-x{
    height:80px;
    white-space:nowrap;
    display:flex;
}
/* 隐藏scrollbar */
::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
}
.view-parent{
    display:inline-block;
}
.view-item{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-color:#222;
    background:#80CBC4;
    margin:10px;
}