zoukankan      html  css  js  c++  java
  • 微信小程序-表格形式如何布局?

    微信小程序没有现成的table标签,该怎么布局呢?

    <view class="my-grids">
          <block wx:for="{{grids}}" wx:key="*this">
              <view url="" class="my-grid" hover-class="my-grid_active">
                  <view class="my-grid__label">{{item}}</view>
              </view>
          </block>
      </view>
    .my-grids {border-top: 1rpx solid #d9d9d9;border-left: 1rpx solid #d9d9d9;overflow: hidden}
    .my-grid {position: relative; display:inline-block; padding: 20px 10px;width: 25%;box-sizing: border-box;border-right: 1rpx solid #d9d9d9;border-bottom: 1rpx solid #d9d9d9}
    .my-grid_active {background-color: #ececec}
    .my-grid__icon {display: block;width: 28px;height: 28px;margin: 0 auto}
    .my-grid__label {margin-top:5px;display: block;text-align: center;white-space: nowrap;text-overflow: ellipsis;overflow: hidden}
    Page({
        data: {
            grids: [0, 1, 2, 3, 4, 5, 6, 7, 8,9,10,11,12,13,14,15]
        }
    });
  • 相关阅读:
    软件课程设计(3)
    软件课程设计(2)
    软件课程设计(1)
    继往开来第五天
    勤勤恳恳第四天
    撸起袖子第三天
    厉兵秣马第二天
    项目初定第一天
    Magic-Club第五天
    Magic-Club第四天
  • 原文地址:https://www.cnblogs.com/changxue/p/8435458.html
Copyright © 2011-2022 走看看