右边菜单
左边菜单
swipe抽屉菜单
小提示: 该例子可以在手机中拖动
上下左右都可以滑动出菜单

更多使用场景

  • 上下交互场景
  • 复杂交互场景
  • 模拟日历交互场景
示例:

html:

<div id="uiSwipe" class="wrap"> <!-- 侧滑菜单 --> <div class="swipeleft" data-moving="200"> 右边菜单 </div> <div class="swiperight" > 左边菜单 </div> <div class="swipeup" > 底部菜单 </div> <div class="swipedown"> 顶部菜单 </div> <!-- 正文内容 --> <div class="bui-page"> 正文内容 </div> </div>

js:

var uiSwipe = bui.swipe({ id: "#uiSwipe", handle: ".bui-page", movingDistance: 200, direction: "xy", });