uview使用card

1.开发环境 uni+uView
2.电脑系统 windows10专业版
3.在开发的过程中,我们经常会使用到uView的card组件,下面我来分享一下使用方法,希望对你有所帮助。
4.废话不多说直接上代码,在template中添加如下代码:

        
          
            设备编号
            2021563256
          
          
            设备类型
            发电机
          
          
            设备状态
            开机
          
        
      

5.在 return 中添加如下代码:

// 卡片数据
      cardtitle: "设备名称",
      cardsubTitle: "清洗机",

7.你可能看到的效果是这样的:

8.解决方法,在style中添加如此下代码:

.card {
      background: #f4f4f5;
      /deep/ .u-flex {
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
      }
      /deep/ .u-row {
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        flex-wrap: nowrap;
      }

      /deep/ .u-card__head--right {
        margin-left: -160rpx;
      }
    }

9.效果如下:

10.本期的分享到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!