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