Hbuilder開発HTML 5 APPのサイドスライドメニュー

1.考え方:
2つのWebViewがあり、1つのmainはホーム・ページをロードするために使用され、1つのmenuはメニューをロードするために使用されます(パフォーマンスを向上させるために、メニュー・アイテムはプリロード方式を採用しています.プリロード時にホーム・ページとリソースを争うことを避けるために、遅延ロードを採用します.たとえば、次のようにします.
//plusReadyイベント後、menuウィンドウが自動的に作成されます.mui.plusReady(function(){main=plus.webview.currentWebview();//settimeoutの目的は、フォームアニメーションが終了した後にcreate webview操作を実行し、リソース競合を回避し、ウィンドウアニメーションがスムーズにならないようにすることです.settimeout(function()/サイドスライドメニューがデフォルトで非表示になり、メモリを節約できます.menu=mui.preload({ id: 'offcanvas-drag-right-plus-menu', url: 'offcanvas-drag-right-plus-menu.html', styles: {    left: 0,    width: '70%' } }); },300); });
2.サイドスライドとは、メニューWebViewの表示を制御し、そのleftを使用して左の位置を位置決めすることである.
3.新しいwebViewを開くには、webviewのshowメソッドの使用に注意してください.
        void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
パラメータの意味:(1)はwebviewオブジェクト(2)のアニメーション効果で、表示されていません.一般的には「none」、(3)アニメーション遷移時間(4)Webviewウィンドウにアニメーション実行が表示されるとコールバック関数がトリガーされ、ウィンドウにアニメーション効果(noneアニメーション効果など)がない場合もこのコールバックがトリガーされます.(5)伝達されたパラメータ;
4.表示方法:
(1)ボタンをクリックして、menuを直接showさせ、mainにスタイルを設定します.
menu.show("none",0,function(){
main.setStyle({
left:"70%", transition:{ duration:150 } }); });
(2)サイドスライドメニューを閉じて、実際にmainのスタイルを設定します.例えば:
            main.setStyle({
left: '0', transition: { duration: 150 } });
また、フォームの切り替えが完了したらmenuをオフにすることに注意してください
//フォームアニメーションが終わったら、メニューwebviewを隠して、リソースを節約します.setTimeout(function() { menu.hide(); }, 200);
5.開かれたWebViewのインタフェースは、サイドスライドメニューを閉じる方法を制御します.
(1)まずホームページを見つけて、main=plus.webview.currentWebview().opener();
(2)ホームページのあるイベントを刺激する,例えばmui.fire(main,"menu:swipeleft");
転載先:https://www.cnblogs.com/bearhb/p/5050557.html