欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    实现微信小程序简易table表格的问题

    2018-05-14 09:50 来源/作者:懒人模板 分类:小程序教程  « »
    1、表格样式文件代码如下:
    .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: #3366FF;
      color: #fff;
      display: flex;
      height: 3rem;
      align-items: center;
    }
    2、表格js测试数据文件如下:
    Page({
      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"}
        ]
      },
      onLoad: function () {
        console.log('onLoad') 
      }
    
    })
    3、表格wxml页面代码如下:
    <view class="table">
      <view class="tr bg-w">
        <view class="th">head1</view>
        <view class="th">head2</view>
        <view class="th ">head3</view>
      </view>
      <block wx:for="{{listData}}" wx:key="{{code}}">
        <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>
        <view class="tr" wx:else>
          <view class="td">{{item.code}}</view>
          <view class="td">{{item.text}}</view>
          <view class="td">{{item.type}}</view>
        </view>
      </block>
    </view>
    做好以上三步以后,就可以达到如下效果:

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议