react 组件列表
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 组件列表的更多相关文章
- 从性能角度看react组件拆分的重要性
React是一个UI层面的库,它采用虚拟DOM技术减少Javascript与真正DOM的交互,提升了前端性能:采用单向数据流机制,父组件通过props将数据传递给子组件,这样让数据流向一目了然.一旦组 ...
- 如何优雅的设计 React 组件
作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家 ...
- 如何优雅的设计React组件
如何优雅的设计 React 组件 如今的 web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家会觉得 j ...
- React组件设计
React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...
- React组件性能调优
React是一个专注于UI层的框架,它使用虚拟DOM技术,以保证它UI的高速渲染:使用单向数据流,因此它数据绑定更加简单:那么它内部是如何保持简单高效的UI渲染呢?这种渲染机制有可能存在什么性能问题呢 ...
- React组件中的key
React组件中的key 一.key的作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给reac ...
- 从工程化角度讨论如何快速构建可靠React组件
前言 React 的开发也已经有2年时间了,先从QQ的家校群,转成做互动直播,主要是花样直播这一块.切换过来的时候,业务非常繁忙,接手过来的业务比较凌乱,也没有任何组件复用可言. 为了提高开发效率,去 ...
- React组件设计(转)
React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...
- React Native 列表的总结
React Native 列表的总结 FlatList和SectionList都是React Native中高性能的列表组件.这些新的列表组件在性能方面都有了极大的提升, 其中最主要的一个是无论列表有 ...
随机推荐
- May 30. 2018 Week 22nd Wednesday
Never forget to say "Thanks." 永远不要忘记说谢谢. Don't take anything we get for granted, and never ...
- input accept属性限制文件上传格式
上传文件的类型:具体做法如下所示: 注意:accept属性可以限制上传格式,其有兼容性如下 <1>上传.csv格式的 <input text="file" acc ...
- 概率期望dp
对于概率dp,我一直都弄得不是特别明白,虽然以前也有为了考试去突击过,但是终究还是掌握得不是很好,所以决定再去学习一遍,把重要的东西记录下来. 1.hdu4405 Description 在一个 \( ...
- 在Linux上搭建VisualSVN Server(svn服务端)
一.检查是否安装了低版本的SVN # rpm -qa | grep subversion 如果已安装SVN,则会返回版本信息.这时需要卸载旧版本的SVN. 卸载旧版本SVN # yum remove ...
- 关于Swift中的指针的那些事
前言 在Objective-c的世界中,一切对象都是指针.它是一种运行时语言,具体指针的对象类型将会在运行时,由系统分配.这样虽然自由,但是却并不安全. Swift世界就不一样了,Swift的世界很安 ...
- centos7下安装docker(17.4docker监控----prometheus)
Prometheus是一个非常优秀的监控工具.准确的说,应该是监控方案.Prometheus提供了监控数据搜集,存储,处理,可视化和告警一套完整的解决方案 Prometheus架构如盗图: 官网上的原 ...
- Python中使用class(),面向对象有什么优势 转自知乎
https://www.zhihu.com/question/19729316 首先我是辣鸡,然后这个问题的确有点意思 首先,类是一个集合,包含了数据,操作描述的一个抽象集合 你可以首先只把类当做一个 ...
- Android-SpinKit 进度条 (ProgressBar)
项目地址: https://github.com/ybq/Android-SpinKit 类别: 进度条 (ProgressBar) 打分: ★★★★★ 更新: 2016-03-28 11:17 大小 ...
- 爬取伯乐在线文章(五)itemloader
ItemLoader 在我们执行scrapy爬取字段中,会有大量的CSS或是Xpath代码,当要爬取的网站多了,要维护起来很麻烦,为解决这类问题,我们可以根据scrapy提供的loader机制. 导入 ...
- How to get Docker
Docker 通俗的理解就是像VM一样的虚拟技术,但是不完全相同. Docker可以打包为镜像文件,在镜像中运行容器. 镜像和容器可以理解成类和对象的关系. 拿VM虚拟机和docker来举例,一个容器 ...