TuniaoUI

# List 列表容器

用于存放tn-list-item列表组件，实现统一管理列表组件。方便管理列表的顶部和边框等信息。

说明

列表组件的外层盒子，结合组件tn-list-item使用

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ 兼容中 兼容中 兼容中 兼容中

# 基本使用

设置列表容器的标题为待发货，去掉所有边框，显示为卡片类型，列表显示右边的箭头。

<template>
    <tn-list-view title="待发货" :card="true" unlined="all">
      <block v-for="(item, index) in 3" :key="index">
        <tn-list-cell :arrow="true">图鸟科技</tn-list-cell>
      </block>
    </tn-list-view>
</template>

# 设置为自定义标题

tn-list-view组件提供了customTitle参数，当该参数设置为true时，title参数会失效。自定义标题的内容设置在名称为title的插槽中。

<tn-list-view :customTitle="true">
  <view slot="title" class="list-title-container">
    <tn-button class="list-title-button">设置</tn-button>
  </view>
</tn-list-view>

# API

# Props

属性名 说明 类型 默认值 可选值
backgroundColor 背景颜色 String - 颜色的十六进制值，rgba(),rgb(),TuniaoUI内置的颜色类名
fontColor 字体颜色 String - 颜色的十六进制值，rgba(),rgb(),TuniaoUI内置的颜色类名
fontSize 字体大小 Number 28 -
fontUnit 字体大小的单位 String rpx -
title 标题 String - -
unlined 隐藏容器边框 String all top/bottom
marginTop 上外边距 String - -
card 显示为卡片模式 Boolean false true
customTitle 自定义标题 Boolean false true

# Slots

名称 说明
default 用户存放tn-list-cell组件
title 存放用户自定义标题的内容

# Event

事件名称 说明 回调参数
clickTitle 标题点击事件 -

← List 列表Item →