mip-sidebar 侧边栏 百度mip导航栏详细使用

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


写的好!

微信扫一扫赏大洋