侧滑菜单
使用侧滑菜单需要引入对应的CSS和JS：
<link rel="stylesheet" type="text/css" href="static/css/aui.sidemenu.css"/>
<script type="text/javascript" src="static/js/aui.sidemenu.js"></script>
初始化侧滑菜单
aui.sidemenu.init(options).then(callback)
示例：
aui.sidemenu.init({
warp: '.aui-container',
content: '#aui-sidemenu-wapper',
position: 'left',
moveType: 'main-move',
moves: ['.aui-container'],
mask: true,
maskTapClose: true,
drag: {
use: true,
//start: null,
//move: null,
end: function(ret){
console.log(ret)
}
},
style: {
w: '70vw',
h: '100vh',
bg: '#333'
},
}).then(function(ret){
console.log(ret)
});Options 参数说明：
| 参数 | 类型 | 描述 | 默认值 | 必选 |
|---|---|---|---|---|
| warp | string | 父容器元素 | body | 否 |
| content | string | 侧滑菜单元素 | '' | 是 |
| moves | arr | 跟随拖动元素； [ header - 页面头部, .content - 页面头部页面内容部分 ] (moveType设置为"all-move" 或 "menu-move"时，此参数必须配置 |
[] | 是 |
| moveType | string |
main-move 主页面移动，侧滑菜单固定 menu-move 侧滑菜单移动，主页面固定 all-move 主页面+侧滑菜单都移动 scale-move 缩放式侧滑(类手机QQ) |
main-move | 否 |
| position | string |
侧滑菜单初始化位置，默认位于页面左侧 left 左侧 right 右侧 |
left | 否 |
| mask | boolean | 是否显示遮罩蒙版 | true | 否 |
| maskTapClose | boolean | 触摸遮罩是否关闭侧滑菜单 | true | 否 |
| speed | number | 打开、关闭页面速度[值越大，速度越快] | 10 | 否 |
| drag | object | { use: true 可选，是否开启拖动打开、关闭菜单[true: 开启 , false: 关闭] start: funtion | null 可选，开始拖动回调 move: funtion | null 可选，拖动中回调 end: funtion | null 可选，拖动结束回调 } |
{} | 否 |
| style | object | 设置样式 | {
w: '80vw', h: '100vh', bg: '#333' } |
否 |
设置配置数据
aui.sidemenu.setData({
moveType: 'all-move',
}).then(function(ret){
//console.log(ret)
});打开侧滑菜单
aui.sidemenu.open({
moveType: 'main-move',
speed: 10,
}).then(function(ret){
console.log(ret)
});关闭侧滑菜单
aui.sidemenu.close({speed: 10}).then(function(ret){
console.log(ret)
});警告⚠️
演示源代码用 VUE 处理动态效果。如需搬用代码，可自行适配调整。
示例代码
<style>
#aui-sidemenu-wapper {
display: none;
color: #FFF;
text-align: center;
}
.aui-sidemenu-logo {
width: 100%;
text-align: center;
margin: 0 auto 30px auto;
}
.aui-sidemenu-logo img {
width: 80px;
border-radius: 50%;
border: 2px solid #FFF;
}
.aui-sidemenu-title {
text-align: center;
color: #FFF;
font-size: 18px;
line-height: 50px;
}
.aui-sidemenu-content {
line-height: 25px;
padding: 0 5px;
box-sizing: border-box;
font-size: 13px;
color: #FFF;
}
.aui-sidemenu-content .aui-btn {
width: 100%;
margin: 0;
}
</style>
<!-- 侧滑菜单容器 -->
<div id="aui-sidemenu-wapper">
<div class="aui-sidemenu-logo">
<img src="../../../static/img/image/logo.png">
</div>
<div class="aui-sidemenu-title">侧滑导航</div>
<div class="aui-sidemenu-content">
可拖动式侧滑菜单示例，可以在这里放置任何内容；关闭侧滑菜单有多种方式： </br>
1、在本侧滑菜单页之外任意位置向右拖动(drag)；</br>
2、点击本侧滑菜单页之外的任意位置; </br>
3、点击如下关闭按钮</br>
<p style="margin: 20px 0px;">
<button class="aui-btn aui-btn-blue" onclick="closeMenu()">关闭侧滑菜单</button>
</p>
</div>
</div>
<script>
// 初始化侧滑菜单
aui.sidemenu.init({
warp: '.aui-container',
content: '#aui-sidemenu-wapper',
position: 'left',
moveType: 'main-move',
moves: ['.aui-container'],
mask: true,
maskTapClose: true,
drag: {
use: true,
end: function (ret) {
console.log(ret)
}
},
style: {
w: '70vw',
h: '100vh',
bg: '#333'
},
}).then(function (ret) {
console.log(ret)
})
function openMenu () { //打开
var _this = this
aui.sidemenu.open({
moveType: 'main-move',
speed: 10,
}).then(function (ret) {
console.log(ret)
})
},
function closeMenu () { //关闭
aui.sidemenu.close({ speed: 10 }).then(function (ret) {
console.log(ret)
})
}
</script>