MUI 实现侧滑菜单及其主体部分上下滑动

最新推荐文章于 2021-06-23 15:29:02 发布
最新推荐文章于 2021-06-23 15:29:02 发布
阅读量1k 收藏 6
点赞数 2
分类专栏： mui 文章标签： mui

在MUI文档的侧滑菜单介绍里没有说明如何实现侧滑，而MUI侧滑菜单默认是没有上下滑动功能的，需要激活。

1、首先在 class="mui-scroll-wrapper" 的元素上添加ID：

  1. <!-- 侧滑导航根容器 -->
  2. <div class="mui-off-canvas-wrap mui-draggable">
  3. <!-- 菜单容器 -->
  4. <aside class="mui-off-canvas-left">
  5. <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
  6. <div class="mui-scroll">
  7. <!-- 菜单具体展示内容 -->
  8. ...
  9. </div>
  10. </div>
  11. </aside>
  12. <!-- 主页面容器 -->
  13. <div class="mui-inner-wrap">
  14. <!-- 主页面标题 -->
  15. <header class="mui-bar mui-bar-nav">
  16. <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"> </a>
  17. <h1 class="mui-title">标题 </h1>
  18. </header>
  19. <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
  20. <div class="mui-scroll">
  21. <!-- 主界面具体展示内容 -->
  22. ...
  23. </div>
  24. </div>
  25. </div>
  26. </div>

从上面例子可以看出，侧滑菜单和主体部分都添加了ID。

分别为：offCanvasSideScroll、offCanvasContentScroll

2、其次在JS里面激活：

  1. mui( '#offCanvasSideScroll').scroll();
  2. mui( '#offCanvasContentScroll').scroll();

大功告成，现在超过高度即可进行下滑了。注意是超过高度！就像浏览器一样，如果“ 主界面具体展示内容”没有超出范围，是没有下滑功能的。

MUI：MUI 侧滑菜单。

完整代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title> </title>
  7. <script src="http://dev.dcloud.net.cn/mui/dist/js/mui.min.js"> </script>
  8. <link href="http://dev.dcloud.net.cn/mui/dist/css/mui.min.css" rel="stylesheet"/>
  9. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script>
  10. <style type="text/css">
  11. body{
  12. background-color: #000000;
  13. }
  14. .mui-off-canvas-wrap{
  15. max-width: 720px;
  16. margin: 0 auto;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <!-- 侧滑导航根容器 -->
  22. <div class="mui-off-canvas-wrap mui-draggable">
  23. <!-- 菜单容器 -->
  24. <aside class="mui-off-canvas-left">
  25. <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
  26. <div class="mui-scroll">
  27. <!-- 菜单具体展示内容 -->
  28. <div style="height:1000px">
  30. </div>
  31. </div>
  32. </div>
  33. </aside>
  34. <!-- 主页面容器 -->
  35. <div class="mui-inner-wrap">
  36. <!-- 主页面标题 -->
  37. <header class="mui-bar mui-bar-nav">
  38. <a id="left-menu" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"> </a>
  39. <h1 class="mui-title">标题 </h1>
  40. </header>
  41. <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
  42. <div class="mui-scroll">
  43. <!-- 主界面具体展示内容 -->
  44. <div style="height:1000px">
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  52. <script type="text/javascript" charset="utf-8">
  53. $( "#left-menu").on( 'tap', function (event) {
  54. mui( '.mui-off-canvas-wrap').offCanvas( 'show');
  55. });
  57. window.onload = function(){
  58. mui( '#offCanvasSideScroll').scroll();
  59. mui( '#offCanvasContentScroll').scroll();
  60. }
  61. </script>
  62. </body>
  63. </html>

很好用，把引用文件换成自己本地的，可以测试下。

感谢原创。

依旧平凡
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MUI 的侧滑菜单 详解
xd775799的博客
06-15 2万+
mui提供了两种侧滑导航实现：webview模式和div模式，两种模式各有优劣，适用于不同的场景。webview模式主页面和菜单内容在不同的webview中，两个页面根据内容需求分别组织DOM结构，mui对其DOM结构无特殊要求，故其有如下优点：菜单内容是单独的webview，故可被多个页面复用； 菜单内容在单独的webview中，菜单区域的滚动不影响主界面，故可使用原生滚动，滚动更为流畅； 另
MUI 实现侧滑菜单及其主体部分上下滑动的方法
08-28
下面小编就为大家分享一篇MUI 实现侧滑菜单及其主体部分上下滑动的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
mui 侧滑菜单
weixin_33882443的博客
05-14 328
  结构模板 这里是示例Html, 必须使用Mui框架才能使用。 主容器 &lt;div class="mui-off-canvas-wrap mui-draggable"&gt;&lt;/div&gt; 菜单窗体 &lt;aside class="mui-off-canvas-right"&gt;&lt;/aside&gt; 主窗体 &lt;div class="mui-conte
mui 侧滑菜单
05-09
主页面引用此js,侧滑菜单页面监听js中自定义的方法，实现类似QQ的侧滑菜单效果
MUI侧滑菜单
heartOfblack 离开了电脑，我不希望我还有病
03-08 4273
MUI的侧滑菜单动画做得很不错，其中分为两种，一种是以webview，另一种是DIV形式 webview模式 主页面和菜单内容在不同的webview中，两个页面根据内容需求分别组织DOM结构，mui对其DOM结构无特殊要求，故其有如下优点： 菜单内容是单独的webview，故可被多个页面复用；菜单内容在单独的webview中，菜单区域的滚动不影响主界面，故可使用原生滚动，
mui上下滑动
balidui8328的博客
05-14 908
//引入 mui.min.css mui.min.js //body <div class="mui-scroll-wrapper"> <div class="mui-scroll"> </div> </div> //js mui('.mui-scroll-wrapper').scroll({ dece...
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)
10-17
主要介绍了微信小程序MUI侧滑导航菜单,结合实例形式分析了微信小程序Popup弹出式,左侧不动，右侧滑动菜单相关实现技巧与注意事项,需要的朋友可以参考下
WebView侧滑菜单完全版-MUI
04-26
【WebView侧滑菜单完全版-MUI】是一款基于MUI框架实现的Webview侧滑菜单解决方案，它集成了父子页面切换功能，提供了丰富的交互体验。在移动应用开发中，Webview通常用于展示HTML5内容，而侧滑菜单是移动应用中常见...
mui实现上下滑动控制显隐效果
LZUGIS
12-30 1572
概述 本文讲述在mui框架下实现上下滑动控制显隐的效果。 效果 实现 html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maxi...
html侧滑菜单mui,MUI - 侧滑菜单
weixin_36421280的博客
06-23 318
动画效果主界面移动，菜单不动 默认菜单移动，主界面不动 mui-slide-inQQ式移动 mui-scalable侧滑核心js代码mui.init({swipeBack: false,});var Main = mui('#Main');//侧滑容器父节点Main[0].classList.add('mui-scalable');//动画效果的类Main.offCanvas().refresh(...
利用 MUI开发app， 如何实现侧滑菜单及其主体部分上下滑动
weixin_34267123的博客
05-31 182
利用mui开发APP 之侧滑菜单主内容滚动问题 　　　MUI作为开发者常用的框架之一，其号称最接近原生APP体验的高性能前端框架。因此利用mui开发移动APP，可以为开发者提供很大的便利和接近原生的体验。但是，在实现一些复杂功能的过程中，难免遇到一些小问题。博主将以自己在项目开发中的一些的经验，陆续对mui使用中容易遇到的小问题，予以解答和分享，希望能帮到更多的开发者朋友。 　　最近，...
MUI 上下滑动划不了 怎么办
热门推荐
LingMax的博客
02-01 1万+
执行js$('#scroll').scroll({indicators: true //是否显示滚动条});初始化马上就好了如需了解mui的其他滑动bug请移步mui的BUG持续更新https://blog.csdn.net/xiaohxx/article/details/79423818...
MUI实现顶部可滑动选项卡
浪子四方
08-28 1351
实现效果 案例源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1...
mui侧滑菜单的功能实现
u013720726的博客
09-04 5401
下面是主要代码，link相关的文件应该就可以产生相应的效果。这就是一个固定的结构，效果的产生是由于相应的css和js。 mui.init()中的swipeBack：true的作用是启动右滑关闭功能。<head> <link href="../css/mui.min.css" rel="stylesheet" /> </head> <body> <!--侧滑菜单容器，包括主界面-->
MUI 如何实现侧滑菜单及其主体部分上下滑动
zoujiawei6的博客
04-21 1万+
... 标题
mui实现侧滑菜单及主体部分上下滑动
yijiupingfan0914的博客
07-06 2031
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scal
MUI 缩放式侧滑导航（webview版）
爱我的修罗
08-03 2636
最近再用MUI框架做APP，框架千千万，只选择自己觉得合适的，并且把一些自己做好的demo，记录下来，组件化，以后哪里需要就过来找找，方便，也方便给一些需要的人解决问题。 今天要说的这个就是缩放式侧滑导航，类似效果如下： 其实具体效果就是，你点击主页面某一个按钮，类似QQ这样弹出一个新页面，具体用处呢，我是这样用的，点击主页面左上角的 头像图标，然后侧滑出个人中心页面，原理也很简单，就...
HBuilder开发App教程09-侧滑菜单
uikoo9的专栏
08-04 1万+
侧滑菜单 功能 上节讲到了列表页，这节讲一个比较常用的功能，侧滑菜单， 在本app中策划菜单用来记录已经完成的事项。 实现方式 用Hbuilder实现类似侧滑菜单这样原生app功能，一般有两种实现方式，详见：这里。 一是webview实现，二是div模拟实现， 两者的区别是div实现简答，但是偶尔效果不是很好， 而webview实现稍微复杂，页面传值也复杂，但是效果好点，一般推
react mui box 如何实现部分loading
最新发布
05-11
可以使用 `CircularProgress` 组件和 `Box` 组件来实现部分 Loading 效果。以下是一个示例代码： ```jsx import React, { useState } from 'react'; import Box from '@mui/material/Box'; import CircularProgress from '@mui/material/CircularProgress'; const PartialLoadingBox = ({ isLoading, children }) => { const [loading, setLoading] = useState(isLoading); return ( <Box position="relative"> {loading && ( <CircularProgress size={40} thickness={4} style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }} /> )} <Box style={{ opacity: loading ? 0.5 : 1 }}> {children} </Box> </Box> ); }; export default PartialLoadingBox; ``` 在这个组件中，我们使用了 `useState` 来控制 Loading 状态，并在 `Box` 组件中设置了 `opacity` 样式来实现透明度变化。你可以将 `isLoading` 属性传递给该组件来控制 Loading 的显示与隐藏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值