mip-history

封装了对历史记录的操作,实现浏览器页面间前进后退的功能。

标题内容
类型动态内容
支持布局responsive, fixed-height, fill, container, fixed
所需脚本https://c.mipcdn.com/static/v2/mip-history/mip-history.js

示例

基本用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<mip-history history="go, -1" class="mip-history-default"> go, -1 </mip-history> <mip-history history="go, -2" class="mip-history-default"> go, -2 </mip-history> <mip-history history="go, 1" class="mip-history-default"> go, 1 </mip-history> <mip-history history="go" class="mip-history-default"> go </mip-history> <mip-history history="back" class="mip-history-default"> back </mip-history> <mip-history history="forward" class="mip-history-default"> forward </mip-history>

<mip-history> 按钮使用布局

示例中的 widthheight 不一定为最终渲染高度,请参考阅读组件布局

1
2
3
4
5
6
7
8
9
10
<!--宽高比3:1--> <mip-history history="go, -1" class="mip-history-default" layout="responsive" width="3" height="1"> go, -1 </mip-history> <!--定高30px--> <mip-history history="go, -1" class="mip-history-default" layout="fixed-height" width="30"> go, -1 </mip-history>

属性

history

说明:填入对历史记录的操作方式,支持 go, back, forward

必选项:是

类型:字符串

取值范围:back, forward, "go, -1"

注意事项

  1. mip-history 的操作相当于对 window.history 的封装。使用方法可参考 MDN 文档
  2. .mip-history-default定义了方便预览的点击的样式,没有绑定事件,可选择性使用。