小程序实现竖行布局视图（类表格）

<view class="item-box">
  <view class="items">
    <view wx:for="{{list}}"  wx:key="{{index}}"  class="item">
      <view  data-index="{{index}}" class="inner txt">
      <span class="item-data">{{item.rank}}</span>
      <span class="item-datacenter"> {{item.name}}</span>
      <span class="item-data">
       <i class="rankpace"> {{item.pace}}</i>
      </span>
      </view>
    </view>
  </view>
</view>

/* pages/leftSwiperDel/index.wxss */
.item-box{
    width: 700rpx;
    margin: 0 auto;
    padding:40rpx 0;
    font-size: 30rpx;
}
.items{
    width: 100%;
}
.item{
    position: relative;
    border-top: 2rpx solid rgb(248, 244, 244);
    height: 106rpx;
    line-height: 120rpx;
    overflow: hidden;
}
.inner.txt{
    background-color: #fff;
    width: 100%;
    z-index: 5;
    transition: left 0.2s ease-in-out;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.item-data{
  width: 20%;
  display: inline-block;
  background: #eee;
  text-align: center;
 }
 .item-datacenter{
   display: inline-block;
   width: 60%;
    text-align: center;
 }
.rankpace{
  color: #fa7e04;
}

// pages/leftSwiperDel/index.js
Page({
  data: {
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    this.tempData();
  },
  //测试临时数据
  tempData: function () {
    var list = [
      {
        rank: "CPU",
        txtStyle: "",
        name: "intel酷睿500+",
        pace: "236.00",
      },
      {
        rank: "主板",
        txtStyle: "",
        name: "影驰RDTFY+8980",
        pace: "450",
      },
      {
        rank: "内存",
        txtStyle: "",
        name: "华硕7689+DRDT",
        pace: "245",
      },
      {
        rank: "硬盘",
        txtStyle: "",
        name: "希捷ssss+90808",
        pace: "217",
      },
  ]
    this.setData({
      list: list
    });
  }
})