微信小程序之圖表系列——最簡單的表格製作

一圖勝千言，相信很多開發者都沒有繞開過圖表製作這個坑，在小程序中也是，當然可以用第三方echart等製圖插件來做，但小程序要求代碼量最大12M，還得分好幾個包，一個echart插件就將近1M，要是隻做一張表或幾張表實在浪費，況且小程序的加載速度與程序包大小也是息息相關的。因此寫這系列文章，目的是降低程序包大小，又能實現需要的圖表。

先來實現一個最簡單的表格製作

做過小程序的可能都會用到“小程序數據助手”這款小程序，是官方提供用來查看小程序數據的，其中有這樣一個表格如下：

我的實現效果

體驗路徑

實現思路：

其實就是一個橫向的scrollview；
另外還有一個點擊效果，點擊後表格內容顯示全部，再點擊則收縮起來，這個控制item的寬度及text樣式就好了

代碼如下：

js

Page({
  data: {
    contentList: [["序號", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], ["姓名", "孫達", "任二", "張三", "李四", "王五", "趙柳", "馮琦", "楚芭", "高酒", "朱詩怡", "羅世爾", "牛食三", "鍾世思"], ["姓別", "男", "男", "男", "男", "男", "女", "女", "女", "男", "女", "女", "女", "男"], ["地址", "河北省邯鄲市復興區", "河北省保定市高碑店區", "北京市豐臺區", "北京市朝陽區", "山東省日照市", "河北省邯鄲市叢臺區", "河北省邯鄲市復興區", "河北省邯鄲市肥鄉區", "河北省邯鄲市永年區", "河北省邯鄲市廣平縣", "河北省邯鄲市復興區", "河北省邯鄲市雞澤縣", "北京市朝陽區望京soho塔一C座"]],
    isShowAll:false
  },

  showAll(){
    if(this.data.isShowAll){
      this.setData({
        isShowAll:false
      })
    }else{
      this.setData({
        isShowAll:true
      })
    }
  }
})

wxml

<view class="container">
  <view class="view-row" style="color:#aaa;font-size:36rpx;margin:30rpx;border-bottom:1rpx solid #aaa;padding:10rpx">圖表系列-表格</view>
  <view style="font-size:32rpx;color:#aaa">表格</view>
  <scroll-view scroll-x style="width:90%;white-space: nowrap;margin-top:20px;">
    <block wx:for="{{contentList}}">
      <view class="{{isShowAll?'view-column-all':'view-column'}}" style="">
        <block wx:for="{{item}}" wx:for-index="subIndex" wx:for-item="subItem">
        <view style="width:100%;background:{{subIndex%2==0?'rgb(206, 236, 255)':'white'}};padding:10px 0;border:1px solid white" bindtap="showAll">
          <text class="{{isShowAll?'text-all':'text-shrink'}}" style="width:100%">{{subItem}}</text>
        </view>
        </block>
      </view>
    </block>
  </scroll-view>
</view>

wxss

.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.text-shrink {
  font-size: 16px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
.text-all {
  font-size: 16px;
  text-align: center;
}
.view-column{
  width:25%;display:inline-block;
}
.view-column-all{
  min-width:25%;display:inline-block;
}