在MUI中如何实现侧滑菜单

下面我就为大家分享一篇mui 实现侧滑菜单及其主体部分上下滑动的方法,具有很好的参考价值,希望对大家有所帮助。

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

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

  

   

    

      

标题

  
  

   

        ...   

    

登录后复制

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

分别为:offCanvasSideScroll、offCanvasContentScroll

2、其次在JS里面激活:

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

登录后复制

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

MUI:MUI 侧滑菜单。

完整代码:

nbsp;html>                body{  background-color: #000000;  }  .mui-off-canvas-wrap{  max-width: 720px;  margin: 0 auto;  }   

    

         

      

        

标题

   
   

    

          

        

          $("#left-menu").on('tap', function (event) {mui('.mui-off-canvas-wrap').offCanvas('show');});window.onload = function(){ mui('#offCanvasSideScroll').scroll(); mui('#offCanvasContentScroll').scroll(); }

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在JS中如何实现两个变量值的交换方法

在JS中如何实现两个变量值的交换方法

在JS中如何实现两个变量值的交换方法

以上就是在MUI中如何实现侧滑菜单的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3185892.html

(0)
上一篇 2025年3月31日 22:39:56
下一篇 2025年3月31日 22:40:02

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何使用puppeteer破解极验的滑动验证码

    这篇文章主要介绍了利用puppeteer破解极验的滑动验证功能,基本流程代码实现给大家介绍的非常详细,需要的朋友可以参考下 基本的流程: 1. 打开前端网,点击登录。 2. 填写账号,密码。 3. 点解验证按钮,通过滑动验证,最后成功登陆。…

    2025年3月31日
    100
  • 在Vue中使用cli+mui有关区域滚动问题

    下面我就为大家分享一篇vue cli+mui 区域滚动的实例代码,具有很好的参考价值,希望对大家有所帮助。 vue cli+mui配合使用达到区域滚到的效果 ,方法如下 第一步 引入mui css js @import url(“/stat…

    编程技术 2025年3月31日
    100
  • 在js中如何实现登录需要滑动验证

    下面我就为大家分享一篇js登录滑动验证的实现(不滑动无法登陆),具有很好的参考价值,希望对大家有所帮助。 js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 nbsp;html PUBLIC “-//W3C//DTD HTML…

    编程技术 2025年3月31日
    100
  • 在vue+swiper中如何实现侧滑菜单效果

    这篇文章主要为大家详细介绍了vue+swiper实现侧滑菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了vue swiper实现侧滑菜单效果的具体代码,供大家参考,具体内容如下 先上效果图: 这个左右滑动以及…

    2025年3月31日
    100
  • zepto实现移动端无缝向上下滚动

    这次给大家带来zepto实现移动端无缝向上下滚动,zepto实现移动端无缝向上下滚动的注意事项有哪些,下面就是实战案例,一起来看一下。 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了网上的资料,大多都是…

    编程技术 2025年3月29日
    100
  • 用户向导左右滑动页面实现之ViewPager_html/css_WEB-ITnose

    接着上一篇博客,上一篇博客是用imageswitcher实现用户向导功能,现在用viewpager实现相同的功能。直接看代码: 布局文件activity_main.xml 登录后复制 ViewPager页面的切换用小圆点来表示当前是第几页,…

    编程技术 2025年3月28日
    100
  • 怎样解决插入表单后上下都会空出一行的问题

    这次给大家带来怎样解决插入表单后上下都会空出一行的问题,解决插入表单后上下都会空出一行的注意事项有哪些,下面就是实战案例,一起来看一下。 不知道大家在网页制作的时候有没有发现,在插入注意事项后,往往在form的上下都会空出一行,这样一来网页…

    编程技术 2025年3月28日
    200
  • 如何通过Vue实现图片的滑动和剪辑功能?

    如何通过Vue实现图片的滑动和剪辑功能? Vue.js是一款流行的JavaScript框架,它提供了许多有用的功能和工具,使得前端开发更加简单和高效。其中一个常见的需求是实现图片的滑动和剪辑功能。本文将介绍如何利用Vue.js实现这两个功能…

    2025年3月13日
    300
  • 如何使用Vue实现滑动轮播图

    Vue是一个流行的JavaScript框架,它可以帮助我们更容易地构建交互式的Web应用程序。今天,我们将介绍如何使用Vue来创建一个滑动轮播图。 我们将使用Vue CLI来创建一个新的Vue项目,并使用Vue官方的轮播组件来实现滑动轮播图…

    2025年3月13日
    200
  • mui和uni-app的区别是什么

    区别:1、MUI是一套前端框架,可以用于开发web端、web app等应用;而uni-app一套可以适用多端的开源框架,可以开发Android、Web、小程序等多平台的应用。2、MU不依赖任何第三方JS库,而uni-app需要。 本教程操作…

    2025年3月11日
    300

发表回复

登录后才能评论