ホームページ > 記事 > ウェブフロントエンド > MUIでサイドスライドメニューを実装する方法
MUIでサイドスライドメニューを実装する方法
- 亚连オリジナル
- 2018-06-09 15:42:322601ブラウズ
以下に、横スライドメニューを上下にスライドさせるための MUI の実装方法とその主要な部分についての記事を共有します。これは良い参考値であり、皆様のお役に立てれば幸いです。
MUI ドキュメントのサイドスライド メニューの紹介では、サイドスライドの実装方法が説明されていません。また、MUI のサイドスライド メニューにはデフォルトで上下のスライド機能がないため、有効にする必要があります。
1. まず、class="mui-scroll-wrapper"の要素にIDを追加します:
<!-- 侧滑导航根容器 -->
<p class="mui-off-canvas-wrap mui-draggable">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left">
<p id="offCanvasSideScroll" class="mui-scroll-wrapper">
<p class="mui-scroll">
<!-- 菜单具体展示内容 -->
...
</p>
</p>
</aside>
<!-- 主页面容器 -->
<p class="mui-inner-wrap">
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
<p id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<p class="mui-scroll">
<!-- 主界面具体展示内容 -->
...
</p>
</p>
</p>
</p>上記の例からわかるように、IDはサイドスライドメニューとメイン部分の両方に追加されます。 。
それらは: offCanvasSideScroll、offCanvasContentScroll
2. 次に、JS でアクティブ化します:
mui('#offCanvasSideScroll').scroll(); mui('#offCanvasContentScroll').scroll();
これで、高さを超えた後に下にスライドできるようになります。 高さを超えているので注意してください！ ブラウザと同様に、「メインインターフェースの特定の表示内容」が範囲を超えない場合、スライド機能はありません。
MUI: MUI のスライド メニュー。
完全なコード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="http://dev.dcloud.net.cn/mui/dist/js/mui.min.js"></script>
<link href="http://dev.dcloud.net.cn/mui/dist/css/mui.min.css" rel="external nofollow" rel="stylesheet"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
body{
background-color: #000000;
}
.mui-off-canvas-wrap{
max-width: 720px;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 侧滑导航根容器 -->
<p class="mui-off-canvas-wrap mui-draggable">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left">
<p id="offCanvasSideScroll" class="mui-scroll-wrapper">
<p class="mui-scroll">
<!-- 菜单具体展示内容 -->
<p style="height:1000px">
</p>
</p>
</p>
</aside>
<!-- 主页面容器 -->
<p class="mui-inner-wrap">
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav">
<a id="left-menu" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
<p id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<p class="mui-scroll">
<!-- 主界面具体展示内容 -->
<p style="height:1000px">
</p>
</p>
</p>
</p>
</p>
<script type="text/javascript" charset="utf-8">
$("#left-menu").on('tap', function (event) {
mui('.mui-off-canvas-wrap').offCanvas('show');
});
window.onload = function(){
mui('#offCanvasSideScroll').scroll();
mui('#offCanvasContentScroll').scroll();
}
</script>
</body>
</html>上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。
関連記事:
Vue で親コンポーネントを通じて子コンポーネントのスタイルを変更する方法
以上がMUIでサイドスライドメニューを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。