let data=[
[
'同时入选IMDB250和豆瓣电影250的电影',
'带你进入不正常的世界',
'用电【影】来祭奠逝去的岁月',
'女孩们的故事【电影】',
'',
'使用 App 【找电影】功能',
'科幻是未来的钥匙——科幻启示录【科幻题材】',
'美国生活面面观',
'2015终极期待',
'经典韩国电影——收集100部'
],
[
'经典',
'冷门佳片',
'豆瓣高分',
'动作',
'喜剧',
'爱情',
'悬疑',
'恐怖',
'科幻',
'治愈',
'文艺',
'成长',
'动画',
'华语',
'欧美',
'韩国',
'日本'
],
[
'小波看书',
'村上春树周边',
'我凭名字认定了你',
'不可饶恕的女人',
'',
'爱欲书',
'他们还写侦探小说',
'人生识字忧患',
'诗歌书店'
],
[
'小说',
'爱情',
'历史',
'外国文学',
'青春',
'励志',
'随笔',
'传记',
'推理',
'旅行',
'奇幻',
'经营'
]
] export default data;
//数据类型
import React from 'react';
import './typelist.scss';
class table extends React.Component{
render(){
return (
<ul className='table'>
{
this.props.table.map((item,index)=>{
return (
<li key={index}>
{item}
<span> </span>
</li>
)
})
}
</ul>
)
}
}
export default table;
.table{
margin-left: .94rem;
list-style: none !important;
padding: 1.12rem 0 1.88rem;
color: #eee;
font-size: .7rem;
overflow: hidden;
width: 100%;
// border-bottom: 1px solid #ccc;
li{
width: 39%;
border-top: solid 1px #eee;
border-right: solid 1px #eee;
float: left;
padding-right: 1.12rem;
height: 2rem;
display: list-item;
color: #42bd56;
line-height: 2rem;
margin-left:0;//修改
padding-left: .3rem;
}
li:nth-child(16){
border-bottom: 1px solid #eee;
}
span{
color: #ccc;
float: right;
font-weight: bold;
display: inline-block;
border-right: solid 1px #ccc;
border-bottom: solid 1px #ccc;
width: .4rem;
height: .4rem;
transform: rotate(-45deg);
margin-top: 1rem;
}
}

滚动列表封装

import React from 'react';
import './list.scss';
class MyList extends React.Component{
render(){
return (
<div id='mylist'>
<ul className='Comlist'>
{
this.props.data.map((item,index)=>{
return <li key={index}>
{item}
</li>
})
}
</ul>
<div className='line'>
</div>
</div> )
}
} export default MyList;
#mylist{
position: relative;
.Comlist{
padding: 15px 15px 25px 15px;
li{
height: 50px;
line-height: 50px;
padding: 0 1.55rem;
letter-spacing: .1em;
overflow: auto;
display: block;
text-align: center;
margin: 0 0 8px 8px;
font-size: .94rem;
display: inline-block;
border-radius: .25rem;
border: solid 1px;
vertical-align: middle;
width: initial;
}
li:first-child{
color: #FF4055;
border-color: #FF4055;
}
li:nth-child(2){
color: #3BA94D;
border-color:#3BA94D;
}
li:nth-child(3){
color: #3BA94D;
border-color:#3BA94D;
}
li:nth-child(4){
color: #FFAC2D;
border-color:#FFAC2D;
}
li:nth-child(5){
width: 100%;
display: block;
height: 1px;
border: 0;
margin: 0;
}
li:nth-child(6){
color: #3BA94D;
border-color:#3BA94D;
}
li:nth-child(7){
color: #FFAC2D;
border-color: #FFAC2D;
}
li:nth-child(8){
color: #2384E8;
border-color:#2384E8;
}
li:nth-child(9){
color: #2384E8;
border-color:#2384E8;
}
li:nth-child(10){
color: #CC3344;
border-color: #CC3344;
}
}
.line{
border:none;
border-bottom: 3px solid #fff;
position: absolute;
bottom: 4px;
width: 100%;
}
}

react 组件列表的更多相关文章

  1. 从性能角度看react组件拆分的重要性

    React是一个UI层面的库,它采用虚拟DOM技术减少Javascript与真正DOM的交互,提升了前端性能:采用单向数据流机制,父组件通过props将数据传递给子组件,这样让数据流向一目了然.一旦组 ...

  2. 如何优雅的设计 React 组件

    作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家 ...

  3. 如何优雅的设计React组件

    如何优雅的设计 React 组件 如今的 web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家会觉得 j ...

  4. React组件设计

    React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...

  5. React组件性能调优

    React是一个专注于UI层的框架,它使用虚拟DOM技术,以保证它UI的高速渲染:使用单向数据流,因此它数据绑定更加简单:那么它内部是如何保持简单高效的UI渲染呢?这种渲染机制有可能存在什么性能问题呢 ...

  6. React组件中的key

    React组件中的key 一.key的作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给reac ...

  7. 从工程化角度讨论如何快速构建可靠React组件

    前言 React 的开发也已经有2年时间了,先从QQ的家校群,转成做互动直播,主要是花样直播这一块.切换过来的时候,业务非常繁忙,接手过来的业务比较凌乱,也没有任何组件复用可言. 为了提高开发效率,去 ...

  8. React组件设计(转)

    React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...

  9. React Native 列表的总结

    React Native 列表的总结 FlatList和SectionList都是React Native中高性能的列表组件.这些新的列表组件在性能方面都有了极大的提升, 其中最主要的一个是无论列表有 ...

随机推荐

  1. May 30. 2018 Week 22nd Wednesday

    Never forget to say "Thanks." 永远不要忘记说谢谢. Don't take anything we get for granted, and never ...

  2. input accept属性限制文件上传格式

    上传文件的类型:具体做法如下所示: 注意:accept属性可以限制上传格式,其有兼容性如下 <1>上传.csv格式的 <input text="file" acc ...

  3. 概率期望dp

    对于概率dp,我一直都弄得不是特别明白,虽然以前也有为了考试去突击过,但是终究还是掌握得不是很好,所以决定再去学习一遍,把重要的东西记录下来. 1.hdu4405 Description 在一个 \( ...

  4. 在Linux上搭建VisualSVN Server(svn服务端)

    一.检查是否安装了低版本的SVN #  rpm -qa | grep subversion 如果已安装SVN,则会返回版本信息.这时需要卸载旧版本的SVN. 卸载旧版本SVN # yum remove ...

  5. 关于Swift中的指针的那些事

    前言 在Objective-c的世界中,一切对象都是指针.它是一种运行时语言,具体指针的对象类型将会在运行时,由系统分配.这样虽然自由,但是却并不安全. Swift世界就不一样了,Swift的世界很安 ...

  6. centos7下安装docker(17.4docker监控----prometheus)

    Prometheus是一个非常优秀的监控工具.准确的说,应该是监控方案.Prometheus提供了监控数据搜集,存储,处理,可视化和告警一套完整的解决方案 Prometheus架构如盗图: 官网上的原 ...

  7. Python中使用class(),面向对象有什么优势 转自知乎

    https://www.zhihu.com/question/19729316 首先我是辣鸡,然后这个问题的确有点意思 首先,类是一个集合,包含了数据,操作描述的一个抽象集合 你可以首先只把类当做一个 ...

  8. Android-SpinKit 进度条 (ProgressBar)

    项目地址: https://github.com/ybq/Android-SpinKit 类别: 进度条 (ProgressBar) 打分: ★★★★★ 更新: 2016-03-28 11:17 大小 ...

  9. 爬取伯乐在线文章(五)itemloader

    ItemLoader 在我们执行scrapy爬取字段中,会有大量的CSS或是Xpath代码,当要爬取的网站多了,要维护起来很麻烦,为解决这类问题,我们可以根据scrapy提供的loader机制. 导入 ...

  10. How to get Docker

    Docker 通俗的理解就是像VM一样的虚拟技术,但是不完全相同. Docker可以打包为镜像文件,在镜像中运行容器. 镜像和容器可以理解成类和对象的关系. 拿VM虚拟机和docker来举例,一个容器 ...