1. First add the ID on the element class= "Mui-scroll-wrapper":Developing apps with MUI
Slide Menu Main Content scrolling problem
MUI, as one of the most common frameworks for developers, is a high-performance front-end framework that is closest to the native app experience. So using MUI to develop mobile apps can provide developers with great convenience and proximity to native experiences. However, in the process of implementing some complex functions, it is unavoidable to encounter some minor problems. Bloggers with their own experience in the development of the project, the MUI in the use of easy to encounter small problems, to answer and share, hoping to help more developers friends.
Recently, bloggers in the project development process encountered such a problem, that is, the use of MUI Slide menu module to achieve the app's side-by-side menu effect, when the side-slip menu added, will affect itself and the main page of the content of the swipe up and down.
I believe this problem in the use of MUI Development app encountered a few people, has been resolved, please refer to.
The code is as follows:
<!--slide navigation root container - <Divclass= "Mui-off-canvas-wrap mui-draggable"> <!--Menu Container - <asideclass= "Mui-off-canvas-left"> <DivID= "Offcanvassidescroll"class= "Mui-scroll-wrapper"> <Divclass= "Mui-scroll"> <!--Menu specific Display content - ... </Div> </Div> </aside> <!--Homepage Face Device - <Divclass= "Mui-inner-wrap"> <!--Main Page Title - <Headerclass= "Mui-bar Mui-bar-nav"> <aclass= "Mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a> <H1class= "Mui-title">Title</H1> </Header> <DivID= "Offcanvascontentscroll"class= "Mui-content mui-scroll-wrapper"> <Divclass= "Mui-scroll"> <!--main interface specific display content - ... </Div> </Div> </Div> </Div>
As can be seen from the above example, the side-by-side menu and the body part have IDs added.
respectively: Offcanvassidescroll, Offcanvascontentscroll.
2, second in JS inside activation:Attention! This is one of the most important steps:
MUI (' #offCanvasSideScroll '). Scroll (); MUI (' #offCanvasContentScroll '). Scroll (); After the initialization of JS, now more than the height of the slide. Attention is over height! Just like a browser, if the "main interface specific content" is not out of range, there is no downside feature.
The complete code is as follows:<!DOCTYPE HTML> <HTML> <Head> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "Width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <Scriptsrc= "Http://dev.dcloud.net.cn/mui/dist/js/mui.min.js"></Script> <Linkhref= "Http://dev.dcloud.net.cn/mui/dist/css/mui.min.css"rel= "stylesheet"/> <Scriptsrc= "Http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></Script> <styletype= "Text/css">Body{Background-color:#000000; }. Mui-off-canvas-wrap{Max-width:720px;margin:0 Auto; } </style> </Head> <Body> <!--slide navigation root container - <Divclass= "Mui-off-canvas-wrap mui-draggable"> <!--Menu Container - <asideclass= "Mui-off-canvas-left"> <DivID= "Offcanvassidescroll"class= "Mui-scroll-wrapper"> <Divclass= "Mui-scroll"> <!--Menu specific Display content - <Divstyle= "height:1000px"> </Div> </Div> </Div> </aside> <!--Homepage Face Device - <Divclass= "Mui-inner-wrap"> <!--Main Page Title - <Headerclass= "Mui-bar Mui-bar-nav"> <aID= "Left-menu"class= "Mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a> <H1class= "Mui-title">Title</H1> </Header> <DivID= "Offcanvascontentscroll"class= "Mui-content mui-scroll-wrapper"> <Divclass= "Mui-scroll"> <!--main interface specific display content - <Divstyle= "height:1000px"> </Div> </Div> </Div> </Div> </Div> <Scripttype= "Text/javascript"CharSet= "Utf-8"> $("#left-menu"). On ('Tap', function(Event) {MUI ('. Mui-off-canvas-wrap'). Offcanvas ('Show'); }); Window.onload= function() {MUI ('#offCanvasSideScroll'). Scroll (); MUI ('#offCanvasContentScroll'). Scroll (); } </Script> </Body> </HTML>
At this point, the problem with the content of the MUI Slide menu home page has been resolved, more details, please focus on Q's front-end world . You can also make suggestions in the comments area about your difficulties or better.
Share this issue here, I think the content of the small partners to recommend, Welcome to comment below the comment area and Bo master interaction, thank you!
Using MUI to develop apps, how to implement a slide-off menu and its body parts swipe up and down
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
