详情模板布局

DetailInfo-详情模板

主要从来展示类似于表单信息的

API

属性名	类型	默认值	描述	最低版本
list	Array		渲染的数据
totalColumn	Number	2	展示数据的列数

效果图

示例

//detailinfo.axml
<view class="page">
  <detail-info list="{{companyInfoList}}">
  
  </detail-info>
  <view class="header">卡槽形式的用法</view>
  <detail-info list="{{testSlot}}">
  <view slot="test">
    我是定制部分的内容
  </view>
  </detail-info>
</view>

//detailinfo.json
 "usingComponents": {
    "detail-info": "@syman/ark-dingtalk/src/detail-info/index"
  }

//detailinfo.js
Page({
  data: {
    companyInfoList: [
      {
        label: '客户名称',
        labelColor: '',
        value: '11111',
        valueColor: '',
        column: 2,//使用默认的总列数2 这边column为2/2=1 那么显示一列
      },
      {
        label: '城市',
        labelColor: '',
        value: '南京',
        valueColor: '',
        column: 1,
        slotName: ''
      },
      {
        label: '决策人',
        labelColor: '',
        value: '张三',
        valueColor: '#ff0000',
        column: 1,
        slotName: ''
      },
      {
        label: '商机来源',
        labelColor: '',
        value: '商机',
        valueColor: '',
        column: 1,
        slotName: ''
      }],
      testSlot:[{
        label: "测试",
        labelColor: '',
        value: '测试去111',
        valueColor: '',
        column: 1,

      },{
        label: '卡槽',
        labelColor: '',
        value: '商机',
        valueColor: '',
        column: 1,
        slotName: 'test'
      }]
  },
  onLoad() {},
});