小程序制作表格，view加载本地背景图片

又回到小程序编码了，充分说明了我们是块砖，哪里需要往那搬的道理。最近项目里用到了小程序制作表格，因为我是前端人员吗，对标签运用，css设置还是不太熟悉的，记录一下。还有就是小程序的大坑，wxss设置background-image只能使用网络图片的问题，不知道微信抽什么风。

小程序制作表格。

上下效果图先了。

image.png

wxml文件

   <view class="table">
      <view class="tr">
            <view class="th">营养元素</view>
            <view class="th">每100克</view>
      </view>
      <view class="tr" wx:for="{{data.table}}">
            <view class="td">{{item.nutri}}</view>
            <view class="td">{{item.num}}</view>
      </view>
   </view><!--表格结束-->

wxss 文件

.table{
   border: 2rpx solid darkgray;
   border-right:0;
   border-bottom:0;
   width: 690rpx;
   margin-left:30rpx;
   font-size:13px; 
}

.tr{
   width: 100%;
   display: flex;
   justify-content: space-around;
}

.td{
  padding: 10rpx;
  border-bottom:2rpx solid darkgray;
  border-right:2rpx solid darkgray;
  text-align: center;
  width: 100%;  
}

.th{
   padding: 10rpx;
  border-bottom:2rpx solid darkgray;
  border-right:2rpx solid darkgray;
  text-align: center;
  width: 100%;  
   font-weight: 400;
}

js文件

  table:[{nutri:"蛋白质",num:"0.2"},
         { nutri: "脂肪", num: "0.5" },
         { nutri: "碳水化合物", num: "16" },
          { nutri: "膳食纤维", num: "6.3" },
          { nutri: "胆固醇", num: "1.5" },],

view设置background-image ,使用本地图片

小程序不支持在wxss文件设置view的background-image 使用本地图片，但是他没说不让用行间元素啊，那咱就用行间元素试试。

<view class='bg' style="background: url('../../source/images/infoBG.png') no-repeat;background-size:100% 100%;">
</view>

竟然好使有没有，哎，坑货。