增加分类标签，效果如下：

效果

1 修改ListData组件

完整代码：

import React , { Component }from 'react'; import { List, Avatar, Icon, Spin ,Tag } from 'antd'; import PropTypes from 'prop-types'; import { connect } from 'dva'; import './my.css'; import {Link} from 'dva/router';class ListData extends Component{changeType(tab) { const { dispatch,pageSize} = this.props dispatch({ type: 'listdata/query', payload: { page:1,pageSize,type:tab} }) } render() { const IconText = ({ type, text }) => (<span> <Icon type={type} style={{ marginRight: 8 }} /> {text} </span> ); const MyTag= {share:'分享',ask: '问答', job: '招聘',good: '精化', dev: '客户端测试'};const Colors= {share:'#87d068',ask: '#2db7f5', job: 'purple',good: 'orange', dev: 'lime'};return ( <Spin spinning={this.props.loading.global} size='large' tip="数据正在加载中"> <div><Tag onClick={this.changeType.bind(this,'all')} color={this.props.type==='all' ? "#87d068" : "#2db7f5"}>全部</Tag><Tag onClick={this.changeType.bind(this,'good')} color={this.props.type==='good' ? "#87d068" : "#2db7f5"}>精华</Tag><Tag onClick={this.changeType.bind(this,'share')} color={this.props.type==='share' ? "#87d068" : "#2db7f5"}>分享</Tag><Tag onClick={this.changeType.bind(this,'ask')} color={this.props.type==='ask' ? "#87d068" : "#2db7f5"}>问答</Tag><Tag onClick={this.changeType.bind(this,'job')} color={this.props.type==='job' ? "#87d068" : "#2db7f5"}>招聘</Tag><Tag onClick={this.changeType.bind(this,'dev')} color={this.props.type==='dev' ? "#87d068" : "#2db7f5"}>客户端测试</Tag></div> <List itemLayout="vertical" size="large" pagination={{ onChange: (page) => { console.log(page); this.props.dispatch({ type: 'listdata/query', payload: { page:page,pageSize:this.props.pageSize,type:this.props.type} }) }, pageSize: this.props.pageSize, total:500, current:this.props.page }} dataSource={this.props.pageData} renderItem={item => ( <List.Item key={item.title} actions={[<IconText type="star-o" text={item.visit_count} />, <IconText type="like-o" text={item.visit_count} />, <IconText type="message" text={item.reply_count} />]} > <List.Item.Meta avatar={<Avatar src={item.author.avatar_url} />} title={<a>{item.author.loginname}</a>} description={item.create_at} />{item.top ? <Tag color='#f50'>置顶</Tag> : <Tag color={Colors[item.tab]}>{MyTag[item.tab]}</Tag>}<Link to={'/detail/'+item.id}>{item.title}</Link> </List.Item> )}/> </Spin> ); } componentWillMount () { const { dispatch, type, pageSize,page} = this.props dispatch({ type: 'listdata/query', payload: { page,pageSize,type} }) } };ListData.propTypes = { type: PropTypes.string.isRequired, pageSize: PropTypes.number.isRequired, };function mapStateToProps(state) { const {pageSize,type,page,pageData} = state.listdata; return { pageSize, type, page, pageData, loading:state.loading }; }// export default ListData; export default connect(mapStateToProps)(ListData); 

2 在列表头部增加tag组件

<div><Tag onClick={this.changeType.bind(this,'all')} color={this.props.type==='all' ? "#87d068" : "#2db7f5"}>全部</Tag><Tag onClick={this.changeType.bind(this,'good')} color={this.props.type==='good' ? "#87d068" : "#2db7f5"}>精华</Tag><Tag onClick={this.changeType.bind(this,'share')} color={this.props.type==='share' ? "#87d068" : "#2db7f5"}>分享</Tag><Tag onClick={this.changeType.bind(this,'ask')} color={this.props.type==='ask' ? "#87d068" : "#2db7f5"}>问答</Tag><Tag onClick={this.changeType.bind(this,'job')} color={this.props.type==='job' ? "#87d068" : "#2db7f5"}>招聘</Tag><Tag onClick={this.changeType.bind(this,'dev')} color={this.props.type==='dev' ? "#87d068" : "#2db7f5"}>客户端测试</Tag></div> 

一共6种类型

3 为每一种类型添加鼠标点击事件

changeType(tab) { const { dispatch,pageSize} = this.props dispatch({ type: 'listdata/query', payload: { page:1,pageSize,type:tab} }) } 

点击后重新获取新的数据，请求参数，页码为1默认获取第一页数据

4 给列表的每一条数据也添加tag

 const MyTag= {share:'分享',ask: '问答', job: '招聘',good: '精化', dev: '客户端测试'};const Colors= {share:'#87d068',ask: '#2db7f5', job: 'purple',good: 'orange', dev: 'lime'}; {item.top ? <Tag color='#f50'>置顶</Tag> : <Tag color={Colors[item.tab]}>{MyTag[item.tab]}</Tag>} 

主要是根据item.tab的来变换颜色以及显示文字

最后效果

效果

这节课内容比较简单，基本上整个网站的主体就完成了，下节课再把剩下几个页面一搞。
欢迎关注我的公众号mike啥都想搞，学习更多内容。

mike啥都想搞

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://www.dengtar.com/12724.html