mip-ad:ad-comm 通用广告

<mip-ad> 的一种类型：通用广告。

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

示例

banner 样式

layout="responsive" 为组件布局设定（布局文档）。width 和 height 请根据广告实际宽高填写。

  1. <mip-ad
  2.     layout="responsive"
  3.     width="414"
  4.     height="80"
  5.     type="ad-comm"
  6.     tpl="onlyImg"
  7.     href="//m.baidu.com/s?word=百度"
  8.     data-size="1242 180"
  9.     src="https://www.mipengine.org/static/img/sample_01.jpg">
  10. </mip-ad>

无图样式

  1. <mip-ad
  2.     layout="fixed-height"
  3.     height="80"
  4.     type="ad-comm"
  5.     tpl="noneImg"
  6.     href="//m.baidu.com/s?word=百度"
  7.     data-title="广告标题">
  8. </mip-ad>

单图样式

  1. <mip-ad
  2.     layout="reponsive"
  3.     width="414"
  4.     height="80"
  5.     type="ad-comm"
  6.     tpl="oneImg"
  7.     href="//m.baidu.com/s?word=百度"
  8.     data-size="1242 180"
  9.     src="https://www.mipengine.org/static/img/sample_02.jpg"
  10.     data-title="广告标题">
  11. </mip-ad>

多图样式

  1. <mip-ad
  2.     type="ad-comm"
  3.     tpl="moreImg"
  4.     href="//m.baidu.com/s?word=百度"
  5.     data-size="1242 180"
  6.     src="https://www.mipengine.org/static/img/sample_01.jpg;https://www.mipengine.org/static/img/sample_02.jpg;https://www.mipengine.org/static/img/sample_03.jpg"
  7.     data-ads="这里是广告摘要;这里是广告摘要"
  8.     data-txt="这里是图片标题;这里是图片标题;这里是图片标题啊啊啊"
  9.     data-title="这里是广告标题这里是广告标题标">
  10. </mip-ad>

属性

type

说明：广告类型
必选项：是
类型：字符串
取值：ad-comm
默认值：无

tpl

说明：样式
必选项：是
类型：字符串
取值：banner, noneImg, oneImg, moreImg
默认值：无

href

说明：跳转地址
必选项：是
类型：URL
默认值：无

src

说明：图片地址，在多图类型下，多张图片的地址用半角分号(;)分隔开
必选项：否
类型：字符串
默认值：无

data-size

说明：图片大小，用来设定图片的宽高比，在有图片的情况下需要设置
必选项：否（广告类型为 banner 时，必填）
类型：两数字用空格分开
默认值：无

data-title

说明：广告标题，可设置为广告描述
必选项：（banner，多图）否；（无图，单图）是
类型：字符串
默认值：无

data-txt

说明：广告子标题，多图时可用
必选项：否
类型：字符串
默认值：无

data-ads

说明：广告摘要，多图时可用
必选项：否
类型：字符串
默认值：无