mip-filter筛选组件介绍 mip-filter筛选组件怎么用

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(固定在底部)

mip-anim动图详解将为大家介绍mip-anim动图怎么用，mip-anim 用来支持在 mip中gif图的使用，下面请看详细的介绍。

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

示例

带placeholder的加载方式

<mip-anim 

layout="fixed" width=210 height=210  src="xxx"  alt="an animation">

<mip-img  

layout="fixed-height"  width=210  height=210  src="xxxx">

</mip-img>

</mip-anim>

只有gif图

<mip-anim

layout="fixed" width=210  height=210  src="xxx"alt="an animation">

</mip-anim>

属性

src

说明：图片路径

必选项：是

类型：字符串

取值范围：URL