mip-fx-flying-carpet

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

说明

镂空滚动。

镂空滚动组件将其内容包括在一个高度固定的容器中，其表现为容器随着正文上下滚动，而在视觉上，其内容不会随着滚动，从而形成镂空滚动。

其内容可以为一张图片，也可以为广告组件。

注意： 该组件只支持 responsive 和 fixed-height 两种布局方式，因此使用时必须写明高度

示例

基本使用

  1. <style>
  2.   body {
  3.     background: #ccc;
  4.   }
  6.   mip-fx-flying-carpet {
  7.     width: 90%;
  8.     margin: auto;
  9.     background: #fff;
  10.   }
  12.   .example2 {
  13.     width: 60%;
  14.     height: 300px;
  15.     background: #000;
  16.     display: flex;
  17.     justify-content: center;
  18.     align-items: center;
  19.     font-size: 20px;
  20.     color: #fff;
  21.     margin-bottom: 10px;
  22.   }
  23. </style>
  24. <div style="height: 500px;"></div>
  25. <mip-fx-flying-carpet height="200">
  26.   <mip-img src="https://www.mipengine.org/static/img/sample_01.jpg" height="275" width="414" layout="responsive" />
  27. </mip-fx-flying-carpet>
  28. <div style="height: 500px;"></div>
  29. <mip-fx-flying-carpet height="200">
  30.   <div class="example2">
  31.     这是个广告 1
  32.   </div>
  33.   <div class="example2">
  34.     这是个广告 2
  35.   </div>
  36. </mip-fx-flying-carpet>
  37. <div style="height: 500px;"></div>

查看例子编辑示例

属性

无必须属性

原文: https://www.mipengine.org/v2/components/layout/mip-fx-flying-carpet.html