mip-fixed悬浮布局组件详解 mip-fixed悬浮布局怎么用

mip-fixed悬浮布局组件详解中为大家介绍了悬浮在页面各个位置上的实现方法，想要了解使用方法的请看下文介绍。

支持 mip 中的悬浮元素整体使用方案

标题	内容
类型	通用
支持布局	不使用布局
所需脚本	https://mipcache.bdstatic.com/static/v1/mip-fixed/mip-fixed.js

示例

顶部悬浮

规则：宽度默认屏幕100%，高度最多85像素

<mip-fixed type="top"> 自定义内容，可以嵌套其他组件 </mip-fixed>

底部悬浮

规则：宽度默认屏幕100%，高度最多85像素

<mip-fixed type="bottom"> 自定义内容，可以嵌套其他组件 </mip-fixed>

左侧悬浮

规则：宽度不超过屏幕10%，高度不超过屏幕25%，属性 bottom 或 top 必须有一个

<mip-fixed type="left" bottom="50px"> 自定义内容，可以嵌套其他组件 </mip-fixed>

右侧悬浮

规则：宽度不超过屏幕10%，高度不超过屏幕25%，属性 bottom 或 top 必须有一个

<mip-fixed type="right" top="50px"> 自定义内容，可以嵌套其他组件 </mip-fixed>

支持 mip-gototop

<mip-fixed type="gototop"> <mip-gototop></mip-gototop> </mip-fixed>

关闭悬浮元素的方法

1、给 mip-fixed 标签添加一个自定义的 id：customid

2、给需要点击关闭悬浮元素的标签添加属性 on="tap:customid.close"

<mip-fixed type="top" id="customid"> <div>我是顶部的fixed</div> <div on="tap:customid.close">我是关闭按钮</div> </mip-fixed>

属性

type

说明：悬浮类型

必选项：是

类型：字符串

取值范围：top/bottom/right/left

top

说明：距离屏幕顶部距离

必选项: 否

类型：字符串

取值范围：数值+单位，例如：50(px|em|rem|vh|vw|vmin|vmax|cm|mm|q|in|pc|pt)

默认值：auto

bottom

说明：距离屏幕底部距离

必选项: 否

取值范围：数值+单位，例如：50(px|em|rem|vh|vw|vmin|vmax|cm|mm|q|in|pc|pt)

默认值：auto

注意事项

悬浮类型

type为top、bottom 类别不需要添加属性：top/bottom;

type为left、right 类别需要至少添加一个top/bottom属性，优先用 bottom。

type为 gototop 类别不需要任何属性。

fixed 元素个数限制

top <= 1

bottom <= 1

left + right <= 1

gototop <= 1

mip-filter筛选组件怎么用?筛选组件，自适应pc和wise宽度，mipengine.org有引用，详细的使用方法请看下文介绍。

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

示例

筛选功能，支持从hash定位筛选项。

<mip-filter  mip-filter-filterWrap=".filter"  mip-filter-itemWrap=".  filter-item-wrap"  mip-filter-enableHash="true">

<sidebar class="filter">

<div class="filter-result"></div>

<ul class="filter-list">

<li class="filter-title">

<div class="filter-link" data-filtertype="all">(all)查看全部

<spanclass="filter-num">3</span></div>

</li>

<li class="filter-title">

<div class="filter-link"data-filtertype="widget">(widget)组件<span class="filter-num">2</span></div>

</li>

<li class="filter-title">

<div class="filter-link"data-filtertype="layout">(layout)组件布局<span class="filter-num">1</span></div>

</li>

</ul>

</sidebar>

<div class="filter-item-wrap">

<div class="filter-item"data-filtertype="widget">

<span>(widget) 组件新增</span>

</div>

<div class="filter-item"data-filtertype="layout">

<span>(layout)广告组件 layout 升级</span>

</div>

<div class="filter-item"data-filtertype="widget">

<span>(widget)测试版发布</span>

</div>

</div>

</mip-filter>

属性

mip-filter-filterWrap

说明：筛选按钮 DOM

必选项：是

类型：字符串

取值：document.querySelector()可填内容，如“.box”

mip-filter-itemWrap

说明：筛选项 DOM

必选项：是

类型：字符串

取值：document.querySelector()可填内容，如“.box”

mip-filter-enableHash

说明：是否支持hash控制

必选项: 否, 类型：字符串

取值：true, false

默认值：true

mip-audio是一个音频播放组件，本次将为大家详细介绍mip-audio的使用方法，帮助大家了解mip-audio组件，下面请看详细介绍。

音频播放组件

描述	提供了一个音频播放组件
类型	通用
支持布局	N/S
所需脚本	https://mipcache.bdstatic.com/static/v1/mip-audio/mip-audio.js

示例

<mip-audio

src="http://cp01-ps-fe-1.epc.baidu.com:8001/javascripts/nicai.mp3">

</mip-audio>

属性

src

说明：音频地址

必填：是

格式：url

使用限制：必须是https的

mip-appdl下载怎么用？mip-appdl 用来支持在 mip 中app的下载，详细的使用方法请看下文介绍。

描述	提供了一个mip中app的下载容器.
类型	通用
支持布局	N/S
所需脚本	https://mipcache.bdstatic.com/static/v1/mip-appdl/mip-appdl.js

示例

基本使用

<mip-appdl

tpl="imageText"

src="http://filesimg.111cn.net/2016/12/17/20161217133210435.png"

texttip="['积分能当钱花了','下载百度浏览器','下载百度浏览器']"

downbtntext="立即使用"

Android-downsrc="http://sqdd.myapp.com/myapp/qqteam/AndroidQQ/mobileqq_android.apk"

Ios-downsrc="itms-apps://itunes.apple.com/app/id452186370"postiontye="static">

</mip-appdl>

固定位置

• 使用 悬浮组件支持

<mip-fixed type="bottom">

<mip-appdl

tpl="imageText"

src="http://filesimg.111cn.net/2016/12/17/20161217133210435.png"

texttip="['积分能当钱花了','下载百度浏览器','下载百度浏览器']"

downbtntext="立即使用"

postiontye="fixed"

Android-downsrc="http://sqdd.myapp.com/myapp/qqteam/AndroidQQ/mobileqq_android.apk"

Ios-downsrc="itms-apps://itunes.apple.com/app/id452186370"

postiontye="fixed">

</mip-appdl>

</mip-fixed>

属性

tpl

说明：展示类型

必填：是

格式：字符串

取值：noneImg, imageText

src

说明：图片地址

必填：是（if(tpl == imageText的)）

格式：字符串

取值：url 类型

texttip

说明：显示问只能

必填：是

格式：字符串

Android-downsrc

说明：安卓下载路径

必填：否

格式：字符串

取值：url 类型

使用限制：直接下载需要传递apk直接下载路径否则可传下载页路径.如果对应系统没有下载链接则自动不显示

Ios-downsrc

说明：ios下载路径

必填：否

格式：字符串

取值：url 类型

使用限制：必须填写appstore下载路径(itms-apps://itunes.apple.com/app/id452186370)或者下载页路径，如果对应系统没有下载链接则自动不显示

postiontye

说明：位置

必填：是

格式：字符串

取值：有两种位置static(在文档中的正常位置), fixed(固定在底部)