mip-img图片是什么 mip-img图片怎么用

很多人都还不知道mip-img图片是什么，以及mip-img图片怎么用，mip-img 用来支持在 mip 中增加图片内容，本次一聚教程网为大家带来了详细的介绍，请看下文。

标题	内容
类型	通用
支持布局	responsive,fixed-height,fill,container,fixed
所需脚本	无

示例

最基本使用

<mip-img 

 layout="responsive"

width="350"

height="263"

src="http://filesimg.111cn.net/2016/12/16/20161216173855963.jpg"

</mip-img>

加全屏查看

<mip-img

 layout="responsive"

width="350"

height="263"

popup

src="http://filesimg.111cn.net/2016/12/16/20161216173855963.jpg">

</mip-img>

其他布局（以fixed为例）

<mip-img 

layout="fixed-height"

height="263"

alt="baidu mip img"

rc="http://filesimg.111cn.net/2016/12/16/20161216173855963.jpg">

</mip-img>

带图片标题

图片标题可添加在<mip-img>后用于说明，可在<style mip-custom>标签下自定义样式

<mip-img

layout="responsive"

width="350"

height="263"

popup

alt="baidu mip img"

src="http://filesimg.111cn.net/2016/12/16/20161216173855963.jpg"

</mip-img>

<p class="mip-img-subtitle">带图片标题的类型</p>

属性

src

说明：图片地址

必选项：是

格式：字符串

popup

说明：设置图片资源是否可以在被点击后弹出全屏浮层查看

必选项：否

取值：无

alt

说明：与img标签的alt属性相同

必选项：否

class

说明：与img标签的class属性相同，用于标识元素，设置元素样式

必选项：否

mip-iframe 是用来支持在 mip 中嵌入第三方内容的一种方式，需要注意的是：所嵌入的内容强制是符合https协议的，下面请看详细的介绍。

如您的网站还不支持https，可使用百度云加速或其他同类型服务，开通https

标题	内容
类型	通用
支持布局	responsive, fixed-height, fixed
所需脚本	无

示例

基本使用

<mip-iframe

allowfullscreen

srcdoc="<p>123</p>"

src="http://m.baidu.com"

sandbox=""

allowfullscreen

width="400"

height="300"

allowtransparency="true"> 

</mip-iframe>

加布局（fixed-height为例）

<mip-iframe

layout="fixed-height"

height="50"

allowfullscreen 

srcdoc="<p>123</p>"

src="http://m.baidu.com"

sandbox=""

allowfullscreen

width="400"

height="300"

allowtransparency="true"> 

</mip-iframe>

属性

src

说明：与原生iframe的src属性作用一致

必选项：是

类型：URL

单位：无

取值：必须要使用https地址

默认值：无

width

说明：与高度（height）的比值被mip-iframe用来计算区域的比例和大小

必选项：是

类型：数字

单位：无

默认值：无

height

说明：与宽度（width）的比值被mip-iframe用来计算区域的比例和大小

必选项：是

类型：数字

单位：无

默认值：无

allowfullscreen

说明：与原生iframe的allowfullscreen属性作用一致

必选项：否

取值：空

默认值：无

srcdoc

说明：与原生iframe的srcdoc属性作用一致

必选项：否

类型：HTML_code

单位：无

取值：要显示在 iframe 中的 HTML 内容。必需是有效的 HTML 语法。

默认值：无

sandbox

说明：与原生iframe的sandbox属性作用一致

必选项：否

类型：字符串

单位：无

取值："", allow-same-origin,allow-top-navigation,allow-forms,allow-script

默认值：无

allowtransparency

说明：与原生iframe的allowtransparency属性作用一致

必选项：否

类型：字符串

单位：无

取值："",true,false

默认值：无

mip-carousel 用来支持 mip 中图片的一种展示方式，支出多图轮播，下面将为大家详细介绍怎么实现。

标题	内容
类型	通用
支持布局	fixed-height,responsive
所需脚本	无

示例

response 布局

<mip-carousel 

layout="responsive" 

width="600" 

height="400"> 

<mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img> 

<mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> 

</mip-img> 

<mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> 

</mip-img> 

</mip-carousel> 

自动轮播

<mip-carousel 

autoplay 

layout="responsive"

width="600" 

height="400"> 

<mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> 

</mip-img> 

<mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> 

</mip-img> 

<mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> 

</mip-img> 

</mip-carousel> 

设置轮播时间间隔

<mip-carousel 

autoplay 

defer="1000"

layout="responsive" 

width="600" 

height="400"> 

<mip-img 

src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> 

</mip-img> 

<mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> 

</mip-img> 

<mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg">

</mip-img> 

</mip-carousel> 

加指示器

<mip-carousel 

autoplay 

defer="1000" 

layout="responsive" 

width="600" 

height="400" 

indicator 

> 

<mip-img 

src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img> 

<mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">

</mip-img>

<mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> 

</mip-img> 

</mip-carousel> 

加翻页按钮

<mip-carousel 

autoplay 

defer="1000"

layout="responsive" 

width="600" 

height="400"

indicator 

buttonController 

> 

<mip-img 

src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img> 

<mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> 

</mip-img> 

<mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> 

</mip-img> 

</mip-carousel> 

加副标题

<mip-carousel
    autoplay
    defer="1000" 

layout="responsive" 

width="600" 

height="400"

indicator
    buttonController
    >
    <a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">
        <mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" layout="responsive" 

width="600"

height="400">

        </mip-img>
        <div class="mip-carousle-subtitle">这里是title2</div>
    </a>
    <mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">
    </mip-img>
    <mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

点击图片跳转

非 mip-carousel 直接子级元素的 mip-img 节点需要设置 width 和 height 属性

<mip-carousel
    autoplay
    defer="1000"

layout="responsive" 

width="600" 

height="400">
    <mip-img 

src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img>

<a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">  

<mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" width="600" height="400">
        </mip-img>
    </a>
    <mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

属性

width

说明：宽度，不是实际宽度，与高度属性配合来设置图片比例

必选项：是

类型：数字

单位：无

默认值：无

height

说明：高度，不是实际高度，与宽度属性配合来设置图片比例

必选项：是

类型：数字

单位：无

默认值：无

autoplay

说明：自动轮播开关

必选项：否

类型：字符串或空

取值："",autoplay

单位：无

默认值：无

defer

说明：每次轮播的时间间隔，如果设置了autoplay，可以添加defer来指定轮播的时间间隔

必选项：否

类型：数字

单位：ms

默认值：2000

MIP组件支持的各种布局，可以让图片屏幕自适应、定高等。让我们看看下面的详细说明。

支持的布局种类

类别	强制 width	强制 height	详细说明
responsive	是	是	能够根据width、height的值，算出元素对应的比例，在不同屏幕宽度上做自适应，非常适合图片、视频等需要大小自适应的组件
fixed-height	否	是	元素的高度固定,width缺省或者取值为auto，比较适合 mip-carousel
fill	否	否	元素的大小根据父节点的大小自动撑开
container	否	否	元素的大小由他们的子节点大小决定,类似 html 的 div
nodisplay	否	否	元素不展现，即 display 为 none；这种元素可应用于：他自身展现依赖用户的点击等行为的触发
fixed	是	是	元素根据 width 和 height 固定高宽，不随 media 变化

使用

MIP 元素添加属性 layout，取值参照上面的种类

<mip-img

layout="responsive"

width="350"

height="263"

popup=""

alt="baidu mip img"

src="http://www.111cn.net//get_pic/upload/image/20161216231233.jpg">

layout 属性缺省规则

width	height	其他属性	默认布局
有	有	无	fixed
有	有	存在sizes 参数	responsive
无或取值为 auto	有	无	fixed-height
无	无	无	container

layout 默认值

所有MIP元素都会有layout。由于移动端的设计大部分是块状的，所以默认的layout是container，类似于div。如果有其它的样式需求，如inline、inline-block。可通过样式覆盖的方式修改元素display等