mip-sidebar 侧边栏的使用，我们先建立一个页面 !DOCTYPEhtml html mip head meta charset = UTF-8 meta name = viewport content = width=device-width,minimum-scale=1,initial-scale=1 link rel = stylesheet type = text/css href = https://c.mipcdn.com/static/v1/mip.css !--canonical […]
mip-sidebar 侧边栏的使用，我们先建立一个页面
<!DOCTYPE html><html mip> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css"> <!--canonical 中的链接优先填写对应内容的H5地址--> <link rel="canonical" href="/xh/dedecms/question/108.html"> <title>Hello World</title> <style mip-custom>h1 { color: red;}</style> </head> <body><!--组件开始--><header> <div id="logo" on="tap:sidebar.open">Open mip-sidebar</div> </header><mip-sidebar id="sidebar" layout="nodisplay" class="mip-hidden"> <ul> <li> <a href="https://www.mipengine.org/">xhcss教程网</a> <button on="tap:sidebar.close"> X </button> </li> <li>Nav item 1</li> <li>Nav item 2</li> <li>Nav item 3</li> <li> Nav item 4 - Image <mip-img src="/st/images/logo-b.png" width="32" height="32" alt="mipengine ico"></mip-img> </li> <li>Nav item 5</li> <li>Nav item 6</li> </ul> </mip-sidebar><!--组件结束--><script src="https://c.mipcdn.com/static/v1/mip.js"></script> <script src="https://c.mipcdn.com/static/v1/mip-sidebar/mip-sidebar.js"></script></body></html> |
核心3个元素
1、点击按钮 在需要点击的时候加这个即可
on="tap:sidebar.open" |
这里有个非常值得注意的问题，就不知道百度这么大一公司做出来的脚本非常蛋疼，就是假设这个层是一个浮动层，z-index比侧边栏滑动出来的高，那么就在侧边栏上面，再点下这个按钮，卵，关不掉了，所以制作的时候一个要这个按钮的index比侧边栏低，或者侧边栏重要提高z-index,默认如果全使用百度mip浮动组件，是比侧边栏低的。
top:控制的，sidebar 侧边栏ID，open 打开的意思， 还有一个关闭的close 即
on="tap:sidebar.close" |
可以在侧边栏加一个按钮或者其他加句这个关闭
2、侧边栏最外层包裹
<mip-sidebar id="sidebar" layout="nodisplay" class="mip-hidden"></mip-sidebar> |
这个层也不能少，至少id是上面控制的，class是默认隐藏的。
这个还有个参数是 side="right"，side="left",就是在左边还是右边，不填写在左边
3、脚本不能少要放在mip.js后面
<script src="https://c.mipcdn.com/static/v1/mip-sidebar/mip-sidebar.js"></script> |
下面是官方属性解释
id
说明：id
必填：是
格式：字符串
单位：无
默认值：无 使用限制：无
layout
说明：布局设定
必填：是
格式：字符串
单位：无
取值：nodisplay
side
说明：侧边栏位置设定，左边或者右边
必填：否
格式：字符串
单位：无
取值：left, right
默认值：left
