跳到主要内容

Step 步骤条

例如快递更新日志，就可以用这个组件来实现

示例​

import { Header, ScrollView, TopView, Step, GroupList, Text, Column } from '@/duxuiExample'

const list = [
  { name: '阶段1', time: '06-18 14:22' },
  { name: '阶段2', time: '06-19 14:27' },
  { name: '阶段3', time: '06-20 15:12' },
  { name: '阶段4', time: '06-21 12:22' },
  { name: '阶段5', time: '06-22 14:22' },
  { name: '阶段6', time: '06-23 14:24' },
]



export default function StepExample() {
  return <TopView>
    <Header title='Step' />
    <ScrollView>
      <GroupList>
        <GroupList.Item title='横向'>
          <Step
            data={list}
            startSize={30}
            renderStart={Start}
            renderEnd={End}
          />
        </GroupList.Item>
        <GroupList.Item title='纵向'>
          <Step
            vertical
            data={list}
            startSize={150}
            renderStart={VerticalStart}
            renderEnd={VerticalEnd}
            pointTop={65}
          />
        </GroupList.Item>
      </GroupList>
    </ScrollView>
  </TopView>
}

const Start = ({
  item
}) => {
  return <Text align='center' size={1}>{item.name}</Text>
}

const End = ({
  item
}) => {
  return <Column className='pv-1 ph-2 bg-white r-2 mh-2'>
    <Text size={1} align='center'>{item.time}</Text>
  </Column>
}

const VerticalStart = ({
  item
}) => {
  return <Column className='p-3 r-2 bg-white mt-3'>
    <Text>{item.name}</Text>
  </Column>
}

const VerticalEnd = ({
  item
}) => {
  return <Column className='p-3 r-2 bg-white mt-3'>
    <Text>{item.time}</Text>
  </Column>
}

Props​

继承自Taro的View Props

data​

列表数据

类型必填默认值
any[]是

vertical​

是否垂直布局

类型必填默认值
boolean否false

renderStart​

横向时上面的渲染内容 纵向是左侧的渲染内容

类型必填默认值
Component否

startSize​

指定尺寸 横向时为高度 纵向时为宽度 不指定则不会渲染开始块

类型必填默认值
number否

renderEnd​

横向时下面的渲染内容 纵向是右侧的渲染内容

类型必填默认值
Component否

renderPoint​

渲染中间的点的内容 或者在data的每一项上传入pointColor会自动渲染颜色

类型必填默认值
Component否

pointTop​

当为纵向是设置点距离顶部的距离

类型必填默认值
number否

onItemClick​

项目点击回调

类型必填默认值
(option: { item: any, index: number }) => void否

lineType​

连接的线条类型

类型必填默认值
emun('solid', 'dashed', 'dotted')否solid

itemClassName​

每一项的样式

类型必填默认值
string否

itemStyle​

每一项的样式

类型必填默认值
CSSProperties否