// 克隆项目
git clone --depth=1 git@github.com:Bruce-zxy/h-list.git h-list
// 安装项目
yarn add @hadesz/h-list
// or
npm i -D @hadesz/h-list
// 引用(ES6+)
import HList from "@hadesz/h-list";
// 使用方式
// Step 1:
const action = [{
text: "编辑",
action: () => {
console.log('BJ');
}
}, {
text: "确认",
action: () => {
console.log('QR');
}
}, {
text: "取消",
action: () => {
console.log('QX');
}
}]
// Step 2:
const datas = [{
title: "1这是一个超长的标题有多长呢我也不知道所以就是超长的",
labels: [{ text: "标签1" }, { text: "标签1" }, { text: "标签1" }, { text: "标签1" }, { text: "标签1" }, { text: "标签1" }, { text: "标签1" }, { text: "标签1" }],
currPrice: "¥23333.22",
origPrice: "¥0.01",
thumbnail: "http://xvhweb.jxxnhjq.com/Content/official-new/img/section1.jpg",
extra: "这也是一个超长的文本,具体有多长呢,我也不知道,但是我想试一试能不能自动溢出",
action: action
}, {
title: "2这是一个超长的标题有多长呢我也不知道所以就是超长的",
// labels: [{text:"标签2"}, {text:"标签2"}, {text:"标签2"}, {text:"标签2"}, {text:"标签2"}, {text:"标签2"}, {text:"标签2"}, {text:"标签2"}],
currPrice: "¥23333.22",
origPrice: "¥0.01",
thumbnail: "http://xvhadmin.jxxnhjq.com/Content/website/myimg/Group11.png",
extra: "这也是一个超长的文本,具体有多长呢,我也不知道,但是我想试一试能不能自动溢出",
action: action
}, {
title: "3这是一个超长的标题有多长呢我也不知道所以就是超长的3这是一个超长的标题有多长呢我也不知道所以就是超长的",
labels: [{ text: "标签3" }, { text: "标签3" }, { text: "标签3" }, { text: "标签3" }, { text: "标签3" }, { text: "标签3" }, { text: "标签3" }, { text: "标签3" }],
currPrice: "¥23333.22",
origPrice: "¥0.01",
// thumbnail: "http://xvhweb.jxxnhjq.com/Content/official-new/img/section1.jpg",
extra: "这也是一个超长的文本,具体有多长呢,我也不知道,但是我想试一试能不能自动溢出",
action: action
}, {
title: "4这是一个超长的标题有多长呢我也不知道所以就是超长的",
labels: [{ text: "标签4" }, { text: "标签4" }, { text: "标签4" }, { text: "标签4" }, { text: "标签4" }, { text: "标签4" }, { text: "标签4" }, { text: "标签4" }],
currPrice: "¥23333.22",
origPrice: "¥100.25",
thumbnail: "http://xvhweb.jxxnhjq.com/Content/official-new/img/section1.jpg",
extra: "这也是一个超长的文本,具体有多长呢,我也不知道,但是我想试一试能不能自动溢出",
action: action
}, {
title: "5这是一个超长的标题有多长呢我也不知道所以就是超长的",
labels: [{ text: "标签5" }, { text: "标签5" }, { text: "标签5" }, { text: "标签5" }, { text: "标签5" }, { text: "标签5" }, { text: "标签5" }, { text: "标签5" }],
currPrice: "¥23333.22",
origPrice: "¥0.01",
thumbnail: "http://xvhweb.jxxnhjq.com/Content/official-new/img/section1.jpg",
extra: "这也是一个超长的文本,具体有多长呢,我也不知道,但是我想试一试能不能自动溢出",
action: action
}, {
title: "6这是一个超长的标题有多长呢我也不知道所以就是超长的",
labels: [{ text: "标签6" }, { text: "标签5" }, { text: "标签5" }, { text: "标签5" }, { text: "标签5" }, { text: "标签5" }, { text: "标签5" }, { text: "标签5" }],
currPrice: "¥23333.22",
origPrice: "¥0.01",
thumbnail: "http://xvhweb.jxxnhjq.com/Content/official-new/img/section1.jpg",
extra: "这也是一个超长的文本,具体有多长呢,我也不知道,但是我想试一试能不能自动溢出",
action: action
}, {
title: "7这是一个超长的标题有多长呢我也不知道所以就是超长的",
labels: [{ text: "标签7" }, { text: "标签5" }, { text: "标签5" }, { text: "标签5" }, { text: "标签5" }, { text: "标签5" }, { text: "标签5" }, { text: "标签5" }],
currPrice: "¥23333.22",
origPrice: "¥0.01",
thumbnail: "http://xvhweb.jxxnhjq.com/Content/official-new/img/section1.jpg",
extra: "这也是一个超长的文本,具体有多长呢,我也不知道,但是我想试一试能不能自动溢出",
action: action
}]
// Step 3:
const react_component = (
<HList
className="List"
style={{
width: "100%"
}}
datas={listData}
renderItem={(data, i) => {
return (
<HList.Item key={i}>
<HList.Item.Image
image={data.thumbnail}
radius
/>
<HList.Item.Content>
<HList.Item.Content.Title>{data.title}</HList.Item.Content.Title>
<HList.Item.Content.Tags
tags={data.labels}
/>
<HList.Item.Content.Highlight
highlight={data.currPrice}
lowlight={data.origPrice}
color="red"
/>
<HList.Item.Content.Extra>{data.extra}</HList.Item.Content.Extra>
</HList.Item.Content>
</HList.Item>
)
}}
/>
)
使用less作为样式语言,在使用期前,可以了解一下less的相关特性。Less
为了避免样式的全局污染和多人开发带来的命名冲突,推荐使用Css modules模块化方案。 Css Modules 严格区分全局样式,局部样式,以及组件库样式覆盖。
避免使用 外层容器设置overflow:hidden模拟的滚动,在ios下会很卡顿,加了-webkit-overflow-scrolling : touch;之后,会引起更多的问题。详情请看这里 深入研究-webkit-overflow-scrolling:touch以及ios滚动
正确的姿势:
- 通过布局技巧,使用body滚动。如本项目中,我对tabBar组件嵌套路由的处理。
- �封装滚动容器实现局部滚动。目前封装了 better-scroll
- 第一步:设置网页在可视窗口的布局方式
<meta name="viewport" content="width=device-width, viewport-fit=cover">
- 第二步:页面主体内容限定在安全区域内
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
- fixed元素适配。示例:
这里我们只需要关注 safe-area-inset-bottom 这个变量,因为它对应的就是小黑条的高度(横竖屏时值不一样)。
参考: iphone X 适配方案
<!-- 布局例子 -->
<div className="container">
<div className="box"></div>
<div className="fixed-bottom footer"></div>
</div>
/* 定义在global.css,可以直接使用 */
.fixed-bottom{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
position: fixed;
z-index: 10;
background-color: #fff;
/* 具体应用位置,通过叠加css确定元素本身样式
width: 100%;
left: 0px;
right: 0px;
bottom: 0px;
height: 50px; */
}
.footer{
width:100%;
height:50px;
left:0px;
right:0px;
bottom:0px;
}
.box{
padding-bottom: calc(50px + env(safe-area-inset-bottom));
}
![]() iOS Safari |
Android |
---|---|
iOS 8+ | Android 4.4+ |