mip-gototop快速回顶组件介绍

mip-gototop 提供了一个用来支持网页快速回顶按钮，用来支持网页快速回顶功能，下面请看详细的使用方法。

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

示例

基本使用

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

设置阈值

<mip-fixed type="gototop"> <mip-gototop threshold='300'></mip-gototop> </mip-fixed>

属性

threshold

说明：显示按钮时页面已经滚动的高度

必选项: 否

取值范围：数值

单位：无

默认值：200

mip-form表单组件怎么用？mip-form 用来支持 mip 中的表单提交，详细的介绍请看下文的mip-form表单组件详解。

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

示例

基本使用

<mip-form method="post" url="//www.baidu.com"> <input type="input" name="username" validatetarget="username" validatetype="must" placeholder="姓名"> <div class="mip-form-target" target="username">姓名不能为空</div> <input type="input" name="email" validatetarget="email" validatetype="email" placeholder="邮件"> <div class="mip-form-target" target="email">填写正确的email</div> <input type="input" name="phone" validatetarget="phone" validatetype="phone" placeholder="电话"> <div class="mip-form-target" target="phone">填写正确的电话格式</div> <input type="input" name="customnumber" validatetarget="custom" validatetype="custom" validatereg=^[0-9]*$ placeholder="我是自定义验证规则数字"> <div class="mip-form-target" target="custom">请输入正确的数字</div> <input type="submit" value="提交"> </mip-form>

加清空按钮

<mip-form method="post" url="//xxx" clear="true"> <input type="input" name="username" validatetarget="username" validatetype="must" placeholder="姓名"> <div target="username">姓名不能为空</div> <input type="input" name="email" validatetarget="email" validatetype="email" placeholder="邮件"> <div target="email">填写正确的email</div> <input type="submit" value="提交"> </mip-form>

属性

method

说明：表单提交方法

必选项：是

url

说明：表单提交url，相当于form的action, 要求https://或//开头

必选项: 是

validatetarget

说明: 验证提示对应tag,用于对应错误时的提示显示元素的查找

必选项：否

validatetype

说明：验证类型, 用于支持简单的验证。目前提供email、phone、idcar、custom。当为custom时则需要填写validatereg

必选项：否

validatereg

说明: 自定义验证，补充站长个性化的验证规则。如果validatetype为custom时需填写相应验证规则

必选项：否

clear

说明: 表单中input清空按钮开关

必选项：否

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