WeChat applet MUI side slide navigation menu example (Popup pop-up, left side, sliding right)

The instance of this paper tells the WeChat applet MUI side slide navigation menu. Share to everyone for your reference, specifically:

Click on the list icon – on the left side of the menu bar Display – Click Close button or the Mask layer on the right – The left menu bar is turned off

Implementation 1: The left menu and the right display page are divided into upper and lower layers

微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)

WXML

   {{{{}                          WXS       PAGe, .page {height: 100%; Font-Family: 'Pingfang Sc', 'Helvetica Neue', Helvetica, 'Droid Sans Fallback', 'Microsoft Yahei', Sans-Serif;} / * Left Navigation List * / .page-bottom {height: 100%; Width: 75%; Position: fixed; Background-Color: RGB (0, 68, 97); z-index: 0;}. Page-list {color: white; padding: 30RPX 0 30RPX 40RPX;} / * right display layer * /. Page-top {position: relative; Top: 0; Left: 0; Width: 750rpx; Height: 100%; Background-Color: RGB (57, 125, 230); z-index: 0; transition: all 0.4s ease; -Webkit-Transition: all 0.4s ease;}. Page-state {transfer: rotate (0deg) Scale (1) Translate (75%, 0%) --Webkit-Transform: Rotate (0DEG) Scale (1) Translate (75%, 0%);}. imgw {width: 100%;} / * Right List button * /. Page-Top .left-nav { Position: fixed; width: 68rpx; height: 38rpx; Left: 20rpx; bottom: 20rpx;} / * right mask layer* /. Page-mask {Position: absolute; width: 100%; Height: 100%; Top: 0; Left: 0; Background-Color: RGBA (0,0,0,0.); z-index: 998; } .page-mask-show {Display: None;}   JS       VAR App = getApp (); var data = required ('../../ utils / data.js'); Page ({/ ** * Page initial data * / data: {banner_URL: data.bannerlist () , NAV_LIST: ['ES6 Learning Road ",' CSS Specialties', 'Vue Battle', 'WeChat Practitioner'], Open: False, IndicatorDots: true, // Whether the panel indicator AutoPlay: true, // is Turn on Auto Switch Interval: 3000, // Auto Switch Time Interval Duration: 500 / / Sliding Animation Time}, // The Operation Function Open_List: Function () {// This is Operation This.SetData ({Open: false} );}, // left navigation switch function OFFCANVAS: function () {if (this.data.open) {this.SetData ({Open: false});} else {this.setdata ({open: true} }}}) 

1. Animation showing the right side, we can directly unify its uniformity through the Class Then change the control of the animation by switching the Class – Reduces the operation of the JS to the STYLE in the DOM. 2. Last remember in the left menu navigation operation
 open = false , restore the page.  
Demo Source

Click here This site downloads .

I hope this article will help the WeChat applet development.
                    
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment