mip-scrollbox

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

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

示例

不换行文字链

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

固定宽度换行链接

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

栅格化

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

不规则栅格化

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

图片栅格

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

组件属性

data-type

说明：横滑类型
必选项：否
类型：字符串
取值范围：row 栅格化（分为12列 ，两端外边距为 17px ），为空则默认自适应横滑
默认值：空值

data-col

说明：横滑子容器 [data-item] 元素上设置的栅格列数，必须组件的 data-type="row" 才生效
必选项：否
类型：属性节点
默认值：3

组件内部属性元素

[data-wrapper]

说明：横滑包裹容器，每个滑动组件内只能存在一个
必选项：是
类型：HTML 节点

[data-inner]

说明：横滑内部容器，每个滑动组件内只能存在一个
必选项：是
类型：HTML 节点

[data-scroller]

说明：横滑滚动容器，每个滑动组件内只能存在一个
必选项：是
类型：HTML 节点

[data-item]

说明：横滑子容器，可以包含多个子容器
必选项：是
类型：HTML 节点

注意事项

布局设置说明

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

  1. <mip-scrollbox height="100" layout="fixed-height">
  2. </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} 来解决间距问题，如有需要可以覆盖相对应的字号大小。