當前位置：首頁 » APP程序 » 側滑菜單頁面小程序

側滑菜單頁面小程序

發布時間: 2021-03-31 00:00:50

Ⅰ 怎麼使用側滑菜單SlidingMenu

看一下怎麼使用吧！
/** SlidingMenu 常用屬性介紹: */

menu.setMode（SlidingMenu.LEFT）;//設置左滑菜單 SlidingMenu.RIGHT SlidingMenu.LEFT_RIGHT 右側滑/左右側滑

menu.setTouchModeAbove（SlidingMenu.TOUCHMODE_FULLSCREEN）;//設置滑動的屏幕局限，該設置為全屏區域都可以滑動

menu.setShadowDrawable（R.drawable.shadow）;//設置暗影

menu.setShadowWidthRes（R.dimen.shadow_width）;//設置暗影的寬度

menu.setBehindOffsetRes（R.dimen.slidingmenu_offset）;//SlidingMenu劃出時主頁面顯示的殘剩寬度

menu.setBehindWidth（400）;//設置SlidingMenu菜單的寬度

menu.setFadeDegree（0.35f）;//SlidingMenu滑動時的漸變程度

menu.attachToActivity（this， SlidingMenu.SLIDING_CONTENT）;//使SlidingMenu附加在Activity上

menu.setMenu（R.layout.menu_layout）;//設置menu的布局文件

menu.toggle（）;//動態斷定主動封閉或開啟SlidingMenu

menu.showMenu（）;//顯示SlidingMenu

menu.showContent（）;//顯示內容

menu.setOnOpenListener（onOpenListener）;//slidingmenu打開關於封閉menu有兩個，簡單的來說，對於menu close事務，一個是when，一個是after

menu.OnClosedListener（OnClosedListener）;//slidingmenu封閉時事務

menu.OnClosedListener（OnClosedListener）;//slidingmenu封閉後事務

簡單設置左方向菜單側滑的使用方法：
public class SlidingExample extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setTitle(R.string.attach);
// set the content view
setContentView(R.layout.content);
// configure the SlidingMenu
SlidingMenu menu = new SlidingMenu(this);
menu.setMode(SlidingMenu.LEFT);
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
menu.setShadowWidthRes(R.dimen.shadow_width);
menu.setShadowDrawable(R.drawable.shadow);
menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
menu.setFadeDegree(0.35f);
menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
menu.setMenu(R.layout.menu);
}

}

如果你要設置左右菜單側滑，看這里：
public class MainActivity extends FragmentActivity {

public SlidingMenu mSlidingMenu;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mSlidingMenu = new SlidingMenu(this);
mSlidingMenu.setMode(SlidingMenu.LEFT_RIGHT);
mSlidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
mSlidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
mSlidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
mSlidingMenu.setMenu(R.layout.slidemenu_primary);//左側滑
mSlidingMenu.setSecondaryMenu(R.layout.slidemenu_secondery);//右側滑

getSupportFragmentManager().beginTransaction().
replace(R.id.aty_main_framLayout, new ViewPagerFragment()).commit();

getSupportFragmentManager().beginTransaction().
replace(R.id.framLayout_fragment, new TranslationAnimationFragment()).commit();

}

/** 重寫返回鍵和menu鍵，控制菜單側滑關閉 */
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
// TODO Auto-generated method stub
switch (keyCode) {
case KeyEvent.KEYCODE_BACK:
if(mSlidingMenu.isMenuShowing())
mSlidingMenu.showContent();
else finish();
return true;
case KeyEvent.KEYCODE_MENU:
mSlidingMenu.showSecondaryMenu();
return true;
}

return super.onKeyDown(keyCode, event);
}

}

下面看一下如何解決側滑跟ViewPager左右滑動的沖突：《當然，我的源碼上展示了怎麼使用》
mSlidingMenu.addIgnoredView(viewPager);

在你的Viewpager內容顯示之前，調用上面的方法，就Ok了、
SlidingMenu.setTouchModeAbove().其中一共包含三中手勢模式：
TOUCHMODE_FULLSCREEN 全屏模式，在正文布局中通過手勢也可以打開SlidingMenu
TOUCHMODE_MARGIN 邊緣模式，在正文布局的邊緣處通過手勢可以找開SlidingMenu
TOUCHMODE_NONE 自然是不能通過手勢打開SlidingMenu了

當你在設置暗影時，在res/drawable/shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

<gradient
android:centerColor="#11000000"
android:endColor="#00000000"
android:startColor="#33000000" />

</shape>

轉載僅供參考，版權屬於原作者。祝你愉快，滿意請點贊哦

Ⅱ 微信小程序開發中如何實現側邊欄的滑動效果

代碼很簡單，就是通過open值控制view對類的選取

Ⅲ html5 浮動側滑菜單欄怎樣實現

一共有4種側滑動畫特效。這款CSS3菜單的特點是滑鼠劃過時即可以各種動畫方式展開和隱藏菜單項，該動畫方式由CSS3中的transition-delay屬性來完成
<style type="text/css">

/*Fontawesome Iconfont*/

@import url(http://libs.useso.com/js/font-awesome/4.0.1/css/font-awesome.min.css);

@import url(http://fonts.useso.com/css?family=Montserrat);

* {margin: 0; padding: 0;}

li {list-style-type: none;}

.grid {float: left;width:980px;margin: 0 auto;}

.grid > li { width: 285px; height: 500px; overflow: hidden; float: left; margin: 20px 0 20px 30px; position: relative; }

.grid > li:hover {box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);}

.grid>li section {position: relative; transition: all 0.25s; width: 100%;}

.grid>li h2 {font: bold 14px montserrat; color: #fff; text-transform: uppercase; position: absolute; text-align: center; width: 60%; left: 20%; top: 100px; padding: 10px 0; border: 2px solid white; border-radius: 4px;}

.sidenav { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(rgba(50,60,60, 1), rgba(50,60,60, 0.7)); width: 50px; transition: all 0.25s; overflow: hidden; padding-top: 100px;}

.sidenav li { _overflow: hidden; width: 150px; }

.sidenav a { text-decoration: none; color: #eee; display: block; line-height: 48px; }

.sidenav span {display: block;}

.sidenav b { padding-left 10px; display: block; color: white; font-family: Montserrat; font-size: 12px; line-height: 4; opacity: 0; }

.sidenav a i { display: block; float: left; font-size: 16px; line-height: 48px; width: 50px; text-align: center; }

/*All instances*/

.grid>li:hover .sidenav {width: 150px;}

.grid>li:hover section {margin-left: 150px;}

.grid>li:hover b {opacity: 1;}

.sidenav li:nth-child(1) b, .sidenav li:nth-child(1) a {transition-delay: .08s;}

.sidenav li:nth-child(2) b, .sidenav li:nth-child(2) a {transition-delay: .16s;}

.sidenav li:nth-child(3) b, .sidenav li:nth-child(3) a {transition-delay: .24s;}

.sidenav li:nth-child(4) b, .sidenav li:nth-child(4) a {transition-delay: .32s;}

.sidenav li:nth-child(5) b, .sidenav li:nth-child(5) a {transition-delay: .40s;}

.sidenav li:nth-child(6) b, .sidenav li:nth-child(6) a {transition-delay: .48s;}

/*Three*/

.three .w {transform: perspective(100px) translateZ(-24px);}

.three b {transform: perspective(100px) rotateY(180deg) translateZ(24px) scale(0.5); }

.three:hover b {transform: perspective(100px) rotateY(0) translateZ(24px) scale(1); transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); background: transparent;}

.three .sidenav {width: 150px;}

/*Two*/

.two .w {transform: perspective(100px) translateZ(-24px);}

.two b {transform: perspective(100px) rotateX(90deg) translateZ(24px) scale(1.5); opacity: 0; }

.two:hover b {transform: perspective(100px) rotateX(0) translateZ(24px) scale(1); transition: all .4s; opacity: 1;}

.two .sidenav {width: 150px;}

/*One*/

.one .w {transform: perspective(100px);}

.one b {transform: perspective(100px) rotateY(90deg); _opacity: 0; transform-origin: left center; _border: 1px solid white;}

.one:hover b {transform: perspective(100px) rotateX(0); transition: all .4s; opacity: 1;}

.one .sidenav {width: 150px;}

.one .sidenav span {float: left; width: 100px;}

</style>



</head>

<body>

<div class="htmleaf-container">

<header class="htmleaf-header bgcolor-11">

<div class="htmleaf-demo center">

<a href="index.html">DEMO1</a>

<a href="index2.html" class="current">DEMO2</a>

<a href="index3.html">DEMO3</a>

<a href="index4.html">DEMO4</a>

</div>

<div style="text-align:center;clear:both;">

<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>

<script src="/follow.js" type="text/javascript"></script>

</div>

</header>

<div class="htmleaf-content bgcolor-8">

<ul class="grid">

<li class="one">

<ul class="sidenav">

<li><a><i class="fa fa-check"></i><span class="w"><b>Tasks</b></span></a></li>

<li><a><i class="fa fa-inbox"></i><span class="w"><b>Messages</b></span></a></li>

<li><a><i class="fa fa-pencil"></i><span class="w"><b>New Post</b></span></a></li>

<li><a><i class="fa fa-cog"></i><span class="w"><b>Settings</b></span></a></li>

<li><a><i class="fa fa-star"></i><span class="w"><b>Starred</b></span></a></li>

<li><a><i class="fa fa-power-off"></i><span class="w"><b>Logout</b></span></a></li>

</ul>

<section>

<h2>Door Opening</h2>

<img src="img/mb1.png"/>

</section>

</li>

<li class="two">

<ul class="sidenav">

<li><a><i class="fa fa-check"></i><span class="w"><b>Tasks</b></span></a></li>

<li><a><i class="fa fa-inbox"></i><span class="w"><b>Messages</b></span></a></li>

<li><a><i class="fa fa-pencil"></i><span class="w"><b>New Post</b></span></a></li>

<li><a><i class="fa fa-cog"></i><span class="w"><b>Settings</b></span></a></li>

<li><a><i class="fa fa-star"></i><span class="w"><b>Starred</b></span></a></li>

<li><a><i class="fa fa-power-off"></i><span class="w"><b>Logout</b></span></a></li>

</ul>

<section>

<h2>Flip Down</h2>

<img src="img/mb2.png"/>

</section>

</li>

<li class="three">

<ul class="sidenav">

<li><a><i class="fa fa-check"></i><span class="w"><b>Tasks</b></span></a></li>

<li><a><i class="fa fa-inbox"></i><span class="w"><b>Messages</b></span></a></li>

<li><a><i class="fa fa-pencil"></i><span class="w"><b>New Post</b></span></a></li>

<li><a><i class="fa fa-cog"></i><span class="w"><b>Settings</b></span></a></li>

<li><a><i class="fa fa-star"></i><span class="w"><b>Starred</b></span></a></li>

<li><a><i class="fa fa-power-off"></i><span class="w"><b>Logout</b></span></a></li>

</ul>

Ⅳ 實現側滑菜單使用 DrawerLayout和SlidingMenu有什麼區別

slidingmenu 將view分為上下兩層，上層是主頁內容頁而下一層才是菜單頁。而drawerlayout的實現是剛好相反，上層是菜單下層是主頁內容。一句話，就是slidingmenu是主頁壓菜單，drawerlayout是菜單壓主頁

Ⅳ 手機菜單頁面側滑(就是選中的功能，點了過後頁面向左邊滑過去就進入功能裡面了)，請問有沒有這樣的軟體...

這種是手機操作系統不是軟體主題啥的，一般手機沒個功能，蘋果手機的操作系統就是這樣的

Ⅵ 小程序頂部導航欄怎樣做成可滑動

android4.0隱藏下方的導航欄用requestWindowFeature(Window.

Ⅶ 怎麼製作微信小程序滑動下拉菜單

在公眾平台，點擊自定義菜單，添加你想要的內容就可以，第一步設置菜單名稱，第二步設置菜單內容，添加完了之後保存並發布，下拉菜單設置完成。

Ⅷ android中我使用了drawerlayout實現側滑菜單，主界面是一個listview,為什麼

給側滑菜單布局添加屬性android:clickable="true"

Ⅸ html5做手機app開發時有沒有好的側滑菜單插件

1.思路：
其時有2個WebView，一個main是用來裝主頁面，一個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, ration, 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:{
ration:150
}
});
});
（2）關閉側滑菜單，實際就是設置main的樣式了，比如：
main.setStyle({
left: '0',
transition: {
ration: 150
}
});
另外注意窗體切換完成後要關掉menu
//等窗體動畫結束後，隱藏菜單webview，節省資源；
setTimeout(function() {
menu.hide();
}, 200);
5.被打開的WebView的界面如何控制關閉側滑菜單：
（1）先要找到主頁面，main = plus.webview.currentWebview().opener();
（2）激發主頁面的某個事件，例如：mui.fire(main,"menu:swipeleft");

閱讀全文

側滑菜單頁面小程序

與側滑菜單頁面小程序相關的閱讀推薦