标题 | 内容 |
类型 | 通用 |
所需脚本 | 无 |
示例
接入方提供一个接收请求的服务地址,例如:https://yourselfdomain/mip/tj.gif, 如果服务地址不支持HTTPS,可以使用百度提供的HTTPS代理服务使用MIP提供的插件,向服务地址定向发送请求。
如:
<mip-pixsrc="https://yourselfdomain/mipurl/tj.gif?t={TIME}&title={TITLE}&host={HOST}&from=baidu"></mip-pix>
MIP会自动匹配参数,生成请求地址。
例如://yourselfdomain/mipurl/tj.gif?t=1459415529464&title=MIP_PIX_DEMO&host=mip.bdstatic.com&from=baidu
目前支持的参数: {TIME},{TITLE},{HOST}
属性
src
说明:资源方服务地址
必选项:是
很多人都还不知道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