ListView

资讯类列表。ListView UI 提供与WeLink规范一致的视图，包含：带说明跳转。

参数说明

效果示例

import React from 'react';
import {
  Cells, CellsTitle, ListView, ListViewArea 
} from '@wecode/react-weui';
import image01 from './images/1.png';
import image02 from './images/2.png';
import image03 from './images/3.png';
import image04 from './images/4.png';
import image05 from './images/5.png';
import image06 from './images/6.png';
import image07 from './images/7.png';

const ListViewDemo = () => (
  <section>
    <CellsTitle>上图下文 - 无辅助文本</CellsTitle>
    <Cells>
      <ListView src={image01} title="AI系列培训-Introduction to AI & ML-分布式" />
    </Cells>
    <CellsTitle>上图下文 - 辅助文本</CellsTitle>
    <Cells>
      <ListView
        src={image02}
        title="AI系列培训-Introduction to AI & ML-分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流"
        footer="01-14 00:00"
      />
    </Cells>
    <CellsTitle>上图下文 - 图标+辅助文本</CellsTitle>
    <Cells>
      <ListView
        src={image03}
        title="AI系列培训-Introduction to AI & ML-分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流"
        footer={(
          <span>
            <i className="icon-16 icon-16-comment" />
            1235评论
          </span>
        )}
      />
    </Cells>

    <CellsTitle>上图下文(小图) - 图标+辅助文本</CellsTitle>
    <Cells>
      <ListViewArea>
        <ListView
          src={image04}
          title="AI系列培训-Introduction to AI & ML-分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流"
          footer="1235播放"
        />
        <ListView src={image05} title="AI系列培训" footer="1235播放" />
      </ListViewArea>
    </Cells>

    <CellsTitle>上图下文(小图)</CellsTitle>
    <Cells>
      <ListViewArea>
        <ListView
          src={image06}
          title="AI系列培训-Introduction to AI & ML-分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流"
        />
        <ListView src={image07} title="AI系列培训" />
      </ListViewArea>
    </Cells>
  </section>
);

export default ListViewDemo;