小程序 列表橫向滑動

 <scroll-view scroll-x class="scroll-header" enable-flex="true">
    <view class="table">
      <view class="tr bg-w">
        <view class="th">head1</view>
        <view class="th">head2</view>
        <view class="th">head3</view>
        <view class="th">head4</view>
        <view class="th">head5</view>
        <view class="th">head6</view>
        <view class="th">head7</view>
        <view class="th">head8</view>
        <view class="th">head9</view>
      </view>
      <block wx:for="{{listData}}" wx:key=" ">
        <view class="tr bg-g" wx:if="{{index % 2 == 0}}">
          <view class="td">{{item.code}}</view>
          <view class="td">{{item.text}}</view>
          <view class="td">{{item.type}}</view>
          <view class="td">{{item.code}}</view>
          <view class="td">{{item.text}}</view>
          <view class="td">{{item.type}}</view>
          <view class="td">{{item.code}}</view>
          <view class="td">{{item.text}}</view>
          <view class="td">{{item.type}}</view>
        </view>

      </block>
    </view>
  </scroll-view>

  data: {
    listData: [
      { "code": "01", "text": "text1", "type": "type1" },
      { "code": "02", "text": "text2", "type": "type2" },
      { "code": "03", "text": "text3", "type": "type3" },
      { "code": "04", "text": "text4", "type": "type4" },
      { "code": "05", "text": "text5", "type": "type5" },
      { "code": "06", "text": "text6", "type": "type6" },
      { "code": "07", "text": "text7", "type": "type7" }
    ],
  },

 

.table {
  border: 0px solid darkgray;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 3rem;
  align-items: center;
}
.td {
    width:40%;
    justify-content: center;
    text-align: center;
}
.bg-w{
  background: snow;
}
.bg-g{
  background: #E6F3F9;
}
.th {
  width: 40%;
  justify-content: center;
  background: #6EBE47;
  color: #fff;
  display: flex;
  height: 3rem;
  align-items: center;
  margin: 0rpx,20rpx,0rpx,20rpx
}
.scroll-header {
display: flex;
white-space: nowrap;
}
.scroll-header table {
height: 50rpx;
width: 200rpx;
display: inline-block; 
border:1px solid #1890fe;
}