mip-scrollbox

横向滑动组件,支持自动适合屏幕宽度、栅格化(12列和两端 17px 边距)等特性,常用于图片横滑、文本链接横滑等场景。

标题内容
类型通用
支持布局responsive,fixed-height,fill,container,fixed
所需脚本https://c.mipcdn.com/static/v2/mip-scrollbox/mip-scrollbox.js

示例

不换行文字链

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<style mip-custom> .demo1 a { display: block; border: 1px solid #ccc; height: 30px; line-height: 30px; padding: 0 10px; margin-right: 20px; border-radius: 5px; white-space: nowrap; } .demo1 [data-item]:last-child a { margin-right: 0; } </style> <mip-scrollbox class="demo1" height="32" layout="fixed-height"> <div data-wrapper> <div data-inner> <div data-scroller> <div data-item> <a href="https://www.baidu.com">百度一下,你就知道。</a> </div> <div data-item> <a href="https://www.mipengine.org">MIP 是移动网页加速器。</a> </div> <div data-item> <a href="https://github.com/mipengine">MIP 的 GitHub 地址是: https://github.com/mipengine</a> </div> <div data-item> <a href="https://www.mipengine.org">点击查看更多精彩内容>></a> </div> </div> </div> </div> </mip-scrollbox>

固定宽度换行链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<style mip-custom> .demo2 [data-item] { width: 100px; border: 1px solid #ccc; margin-right: 10px; height: 100px; overflow: hidden; } .demo2 [data-item] a { display: block; height: 100px; padding: 0 3px; color: #555; } .demo2 [data-item]:last-child { margin-right: 0; } </style> <mip-scrollbox class="demo2" height="100" layout="fixed-height"> <div data-wrapper> <div data-inner> <div data-scroller> <div data-item> <a href="https://www.mipengine.org">使用 MIP 无需等待加载,页面内容将以更友好的方式瞬时到达用户。</a> </div> <div data-item> <a href="https://www.mipengine.org">MIP 提供实用、强大的基础组件,开发者可根据需求任意选择。</a> </div> <div data-item> <a href="https://www.mipengine.org">MIP 是一项永久的开源计划,提供持续优化的解决方案。</a> </div> <div data-item> <a href="https://www.mipengine.org">MIP 语法基于 HTML 并提供详细的示例,开发者仅需做简单开发。</a> </div> <div data-item> <a href="https://www.mipengine.org">MIP(Mobile Instant Pages - 移动网页加速器),是一套应用于移动网页的开放性技术标准。通过提供 MIP HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统,实现移动网页加速。</a> </div> <div data-item> <a href="https://www.mipengine.org">MIP HTML 规范中有两类标签,一类是 HTML 常规标签,另一类是 MIP 标签。MIP 标签也被称作 MIP HTML 组件,使用它们来替代 HTML 常规标签可以大幅提升页面性能。</a> </div> <div data-item> <a href="https://www.mipengine.org">用户在访问 MIP 页面的时候,请求首先会发到 CDN 服务器,如果页面存在,则从 CDN 返回,如果 CDN 上不存在,则会请求第三方服务器。同时 MIP-Cache 服务器会将页面缓存到 CDN 上。</a> </div> </div> </div> </div> </mip-scrollbox>

栅格化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style mip-custom> .demo3 [data-item] > div { height: 100px; background-color: #ccc; } </style> <mip-scrollbox data-type="row" class="demo3" layout="fixed-height"> <div data-wrapper> <div data-inner> <div data-scroller> <div data-item> <div>1的内容,span3</div> </div> <div data-item> <div>2的内容,span3</div> </div> <div data-item> <div>3的内容,span3</div> </div> <div data-item> <div>4的内容,span3</div> </div> <div data-item> <div>5的内容,span3</div> </div> <div data-item> <div>6的内容,span3</div> </div> <div data-item> <div>7的内容,span3</div> </div> </div> </div> </div> </mip-scrollbox>

指定默认的滚动距离

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<mip-scrollbox data-type="row" data-scroll-left="20%" class="demo3" layout="fixed-height"> <div data-wrapper> <div data-inner> <div data-scroller> <div data-item> <div>1的内容,span3</div> </div> <div data-item> <div>2的内容,span3</div> </div> <div data-item> <div>3的内容,span3</div> </div> <div data-item> <div>4的内容,span3</div> </div> <div data-item> <div>5的内容,span3</div> </div> <div data-item> <div>6的内容,span3</div> </div> <div data-item> <div>7的内容,span3</div> </div> </div> </div> </div> </mip-scrollbox>

不规则栅格化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<style mip-custom> .demo4 [data-item] { height: 100px; } .demo4 [data-item] a { display: block; height: 100px; padding: 0 3px; color: #555; border: 1px solid #ccc; box-sizing: border-box; -webkit-box-sizing: border-box; } </style> <mip-scrollbox data-type="row" class="demo4"> <div data-wrapper> <div data-inner> <div data-scroller> <div data-item data-col="6"> <a href="https://www.mipengine.org">使用 MIP 无需等待加载,页面内容将以更友好的方式瞬时到达用户。</a> </div> <div data-item data-col="4"> <a href="https://www.mipengine.org">MIP 提供实用、强大的基础组件,开发者可根据需求任意选择。</a> </div> <div data-item data-col="6"> <a href="https://www.mipengine.org">MIP 是一项永久的开源计划,提供持续优化的解决方案。</a> </div> <div data-item data-col="4"> <a href="https://www.mipengine.org">MIP 语法基于 HTML 并提供详细的示例,开发者仅需做简单开发。</a> </div> <div data-item data-col="6"> <a href="https://www.mipengine.org">MIP(Mobile Instant Pages - 移动网页加速器),是一套应用于移动网页的开放性技术标准。通过提供 MIP HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统,实现移动网页加速。</a> </div> </div> </div> </div> </mip-scrollbox>

图片栅格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<mip-scrollbox data-type="row" class="demo5"> <div data-wrapper> <div data-inner> <div data-scroller> <div data-item data-col="4"> <mip-img src="https://dummyimage.com/300x400?a" width="300" height="400" layout="responsive" > </mip-img> <p>这是 col4 的容器</p> </div> <div data-item data-col="4"> <mip-img src="https://dummyimage.com/300x400?b" width="300" height="400" layout="responsive" > </mip-img> <p>这是 col4 的容器</p> </div> <div data-item data-col="4"> <mip-img src="https://dummyimage.com/300x400?c" width="300" height="400" layout="responsive" > </mip-img> <p>这是 col4 的容器</p> </div> <div data-item data-col="4"> <mip-img src="https://dummyimage.com/300x400?d" width="300" height="400" layout="responsive" > </mip-img> <p>这是 col4 的容器</p> </div> <div data-item data-col="4"> <mip-img src="https://dummyimage.com/300x400?e" width="300" height="400" layout="responsive" > </mip-img> <p>这是 col4 的容器</p> </div> <div data-item data-col="4"> <mip-img src="https://dummyimage.com/300x400?f" width="300" height="400" layout="responsive" > </mip-img> <p>这是 col4 的容器</p> </div> </div> </div> </div> </mip-scrollbox>

组件属性

data-type

说明:横滑类型

必选项:否

类型:字符串

取值范围:row 栅格化(分为12列 ,两端外边距为 17px ),为空则默认自适应横滑

默认值:空值

data-col

说明:横滑子容器 [data-item] 元素上设置的栅格列数,必须组件的 data-type="row" 才生效

必选项:否

类型:属性节点

默认值:3

data-scroll-left

说明:通过 data-scroll-left 的值指定默认聚焦的区域,可以是一个数字,也可以是一个百分比的字符串,百分比指的是滚动容器可滚动区域长度的比例

必选项:否

类型:数字|百分比字符串

默认值:0

组件内部属性元素

[data-wrapper]

说明:横滑包裹容器,每个滑动组件内只能存在一个

必选项:是

类型:HTML 节点

[data-inner]

说明:横滑内部容器,每个滑动组件内只能存在一个

必选项:是

类型:HTML 节点

[data-scroller]

说明:横滑滚动容器,每个滑动组件内只能存在一个

必选项:是

类型:HTML 节点

[data-item]

说明:横滑子容器,可以包含多个子容器

必选项:是

类型:HTML 节点

注意事项

布局设置说明

如果已知滑动容器的高度,请设置该组件的 layoutheight 以让页面渲染时组件的位置固定,从而加速页面渲染,例如已知滑动组件高度为 100px ,那么可以设置:

1
2
<mip-scrollbox height="100" layout="fixed-height"> </mip-scrollbox>

内部元素 box-sizing 说明

由于栅格化需要计算宽度,对 <mip-scrollbox> 组件中的 [data-scroller], [data-inner], [data-item] 属性元素设置了 box-sizing: border-box; 样式,如有特殊需求请自动覆盖。

元素字号问题

由于 [data-item] 属性元素使用了 display: inline-block 样式,会引发元素之间有约 3px 左右的间距,组件内设置了 [data-scroller] {font-size: 0}[data-item] {font-size: 12px} 来解决间距问题,如有需要可以覆盖相对应的字号大小。