主页 > 网站建设 >

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

网站建设 2022-07-27 08:13www.1681989.com免费网站
mip-sidebar 侧边栏的使用，我们先建立一个页面 !DOCTYPEhtml html mip head meta charset = UTF-8 meta name = viewport content = width=device-width,mimum-scale=1,itial-scale=1 lk rel = stylesheet type = text/css href = https://c.mipcdn./static/v1/mip.css !--canonical […]



mip-sidebar 侧边栏的使用，我们先建立一个页面


<!DOCTYPE html>
<html mip>
             <head>
             <meta charset="UTF-8">
             <meta name="viewport" content="width=device-width,mimum-scale=1,itial-scale=1">
             <lk rel="stylesheet" type="text/css" href="https://c.mipcdn./static/v1/mip.css">
             <!--canonical 中的链接优先填写对应内容的H5地址-->
             <lk 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://.mipenge./">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="mipenge ico"></mip-img>
                 </li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>
             </mip-sidebar>
<!--组件结束-->
 
<script src="https://c.mipcdn./static/v1/mip.js"></script> 
<script src="https://c.mipcdn./static/v1/mip-sidebar/mip-sidebar.js"></script>
</body>
</html>
 

核心3个元素

1、点击按钮 在需要点击的时候加这个即可


on="tap:sidebar.open"
 

这里有个非常值得注意的问题，就不知道百度这么大一公司做出来的脚本非常蛋疼，就是假设这个层是一个浮动层，z-dex比侧边栏滑动出来的高，那么就在侧边栏上面，再点下这个按钮，卵，关不掉了，所以制作的时候一个要这个按钮的dex比侧边栏低，或者侧边栏重要提高z-dex,默认如果全使用百度mip浮动组件，是比侧边栏低的。

:控制的，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./static/v1/mip-sidebar/mip-sidebar.js"></script>
 

下面是官方属性解释
 

属性

id

说明id

必填是

格式字符串

单位无

默认值无 使用限制无

 

layout

说明布局设定

必填是

格式字符串

单位无

取值nodisplay

 

side

说明侧边栏位置设定，左边或者右边

必填否

格式字符串

单位无

取值left, right

默认值left


上一篇：

百度mip-img图片详解 如何修改图片MIP

 下一篇：

论展现量，浏览量，浏览次数，访客数的区别

网站设计

Copyright © 2016-2025 www.1681989.com 推火网 版权所有 Power by