Mini Program natively implements left-slide drawer menu

On mobile devices, the side-sliding menu is a very commonly used component (usually called a Drawer). Because mobile phone screens are too large nowadays, clicking the menu button in the corner is obviously not as convenient as swiping in the middle of the screen.

Compared with other platforms, the component library support of mini programs is obviously not perfect enough, and the various frameworks are not yet mature. Because I was confused by various mysterious bugs when using the framework before, I decided to go back to the native environment.

Recently, I studied how to implement the sliding drawer menu effect in the native framework. I thought it would be very troublesome, but I found that it only takes a few dozen lines of code, and many flexible effects can be achieved by analogy. I feel that there is not much relevant information on the Internet, so I would like to share it here. In addition to the code blocks posted in the article, you can also click the link to preview the effects and view the code snippets in the mini program development tool. Three common effects are implemented here. Let’s take a look at the animated image first, and then we will explain the code implementation one by one.

A Menu on the top

A2 menu is on the upper layer, and the lower layer is masked

B Menu is at the bottom

WXS Response Event

The principle of the gesture control menu is very simple: the applet provides a series of events triggered by touch gestures, including touchstart, touchmove, touchend touchend) and so on. By binding custom event response functions to these events, you can open and close the menu according to gestures.

For performance reasons, event handling functions are best placed in WXS rather than JS files. The specific principle is related to the operating environment of the applet. If you are interested, you can check it out at the end of the article. WXS is a special scripting language for applet (the relationship between WXS and JS is equivalent to the relationship between WXSS and CSS). The syntax is similar to JS, but there are some differences, such as:

• Isolated from JS, cannot call functions defined in other JavaScript files, nor can it call the API provided by the mini program
• It can only respond to events of built-in components of the mini program, and does not support event callbacks of custom components.
• Variables and functions are private to the module by default and are exposed to the outside world through module.exports
• Use tags to import in WXML (relative path must be used)

The basic writing methods in wxs files and wxml files are as follows:

// index.wxs

function touchStart(e, ins) {}
function touchMove(e, ins) {}
function touchEnd(e, ins) {}

module.exports = {
  touchstart: touchStart,
  touchmove: touchMove,
  touchend: touchEnd
}
<wxs module="drawer" src="./index.wxs"></wxs>

<view bindtouchstart="{{drawer.touchstart}}"
      bindtouchmove="{{drawer.touchmove}}" 
      bindtouchend="{{drawer.touchend}}">
</view>

Plan A

Page structure and style

This is one of the most common drawer menu styles. The main content does not move when sliding, and the menu is displayed on the upper layer. First write out the basic HTML structure and CSS style (some aesthetic style sheets are omitted):

<wxs module="drawer" src="./index.wxs"></wxs>

<view>
  <view class="main" bindtouchstart="{{drawer.touchstart}}"
    bindtouchmove="{{drawer.touchmove}}" bindtouchend="{{drawer.touchend}}">
    <view>
      Slide right to display the side menu solution A
    </view>
  </view>

  <view class="drawer" data-drawerwidth="150">
    <view class="drawer-item">drawerA</view>
    <view wx:for="{{[1, 2, 3]}}" class="drawer-item">
      <text>menu item {{item}}</text>
    </view>
  </view>
</view>

Several key points in WXML:

• Correctly import the wxs module (relative path must be used)
• The menu is hidden when performing a sliding gesture, so the sliding is actually performed on the main interface, so the three sliding event callbacks need to be bound to the view of the main content.
• The .drawer element is moved, and the class attribute needs to be set for easy access
• The data-drawerwidth attribute of the drawer element is passed to the wxs script through the dataset, which specifies the width of the menu and needs to be consistent with the style.

There is nothing much to say about WXSS, it is written in the comments:

.main {
  height: 100vh;
  width: 100%;
  position: absolute;
}

.drawer {
  height: 100vh;
  width: 150px;
  position: absolute;
  transition: transform 0.4s ease; /* Use transform to achieve displacement, add transition animation to make it smoother*/
  left: -150px; /* width and offset are consistent with the values ​​in WXML, the menu is hidden in the initial state*/
}

WXS event callback function

The wxs function has two input parameters

• event is the applet event object, and on this basis, there is also an instance of the component that triggers the event event.instance
• ownerInstance is the instance of the parent component (page) of the component that triggered the event

The component instance in wxs is an encapsulated ComponentDescriptor object, which can operate the component's dataset, set style, class, etc., which is basically sufficient for interactive animation. For more usage, please refer to the documentation.

var wxsFunction = function(event, ownerInstance) {
    var instance = ownerInstance.selectComponent('.classSelector') // Returns the instance of the component instance.setStyle({
        "font-size": "14px" // Support rpx
    })
    instance.getDataset()
    instance.setClass(className)

    return false // Do not bubble up, which is equivalent to calling stopPropagation and preventDefault at the same time
}

WXS Scripts

Mainly conditional judgment, the logic is nothing special, it is not difficult to understand when combined with the situation

• Do not use let or const to declare variables, or you will get an error.
• The code for setting the transform attribute X displacement is simply encapsulated to make it look more beautiful.
• Judge point is similar to the adsorption effect, that is, when the menu is drawn beyond a certain position, the remaining part will be automatically opened.

var startmark = 0;
var status = 0; // Menu open or closed status var JUDGEPOINT = 0.7;

function touchStart(e, ins) {
  var pageX = (e.touches[0] || e.changedTouches[0]).pageX;
  startmark = pageX;
}

function touchMove(e, ins) {
  var pageX = (e.touches[0] || e.changedTouches[0]).pageX;
  var offset = pageX - startmark;
  var drawerComp = ins.selectComponent('.drawer');
  var drawerWidth = drawerComp.getDataset().drawerwidth;

  if (offset > 0 && status == 0) {
    setCompTransX(drawerComp, Math.min(drawerWidth, offset))
  } else if (offset < 0 && status == 1) {
    setCompTransX(drawerComp, Math.max(0, offset))
  }
}

function touchEnd(e, ins) {
  var pageX = (e.touches[0] || e.changedTouches[0]).pageX;
  var offset = pageX - startmark;
  var drawerComp = ins.selectComponent('.drawer');
  var drawerWidth = drawerComp.getDataset().drawerwidth;

  if (offset > 0 && status == 0) {
    if (offset < drawerWidth * JUDGEPOINT) {
      setCompTransX(drawerComp, 0);
    } else {
      setCompTransX(drawerComp, drawerWidth);
      status = 1;
    }
  } else if (offset < 0) {
    setCompTransX(drawerComp, 0);
    status = 0;
  }
}

function setCompTransX(comp, x) {
  comp.setStyle({
    transform: 'translateX(' + x + 'px)',
  })
}

module.exports = {
  touchstart: touchStart,
  touchmove: touchMove,
  touchend: touchEnd
}

Mask layer

Click the link at the beginning or end of the article to view the complete code in the mini program development tool.

The mask layer only needs to add a view between the menu and the main container:

<view class="main"></view>
<view class="mask" data-maxopacity="0.6"></view>
<view class="drawer" data-drawerwidth="150"></view>

The pointer-events property is very important in the style. If it is set to none, the click action will penetrate the view to the lower layer. Because the mask layer is not like the drawer, it is outside the screen. Although its transparency is 0, it actually covers .main all the time. If you don't add this attribute, all clicks on .main will be on .mask, and sliding or other buttons will be invalid.

.mask {
  height: 100vh;
  width: 100%;
  position: fixed;
  transition: opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
  background-color: #548CA8;
}

The wxs script is also basically the same. You only need to obtain the .mask instance and the transparency parameter in the dataset in a similar way, and set the transparency attribute of the mask layer while setting the displacement attribute.

function setDrawer(x) {
  setCompTransX(drawerComp, x);
  maskComp.setStyle({
    opacity: x / drawerWidth * maskOpacity,
  })
}

Plan B

Click the link at the beginning or end of the article to view the complete code in the mini program development tool.

The main difference between Solution B and Solution A is that when sliding, the main interface moves to the right to reveal the lower menu, and the implementation of other parts is no different. Only the main differences are posted here.

Because the .main element is moved, the width configuration data is placed in the tag of the element, so that one less component instance can be obtained.

<view class="drawer"></view>

<view class="main" 
      data-drawerwidth="150" 
      bindtouchstart="{{drawer.touchstart}}"
      bindtouchmove="{{drawer.touchmove}}" 
      bindtouchend="{{drawer.touchend}}">
</view>

The transition animation properties are also placed in .main, and the offset of .drawer is no longer needed.

.main {
  height: 100vh;
  width: 100%;
  position: absolute;
  transition: transform 0.4s ease;
}

.drawer {
  height: 100vh;
  width: 150px;
  position: absolute;
}

In the wxs script, except for the different components obtained, even the displacement settings do not need to be changed.

function touchMove(e, ins) {
  var pageX = (e.touches[0] || e.changedTouches[0]).pageX;
  var offset = pageX - startmark;
  var mainComp = ins.selectComponent('.main');
  var drawerWidth = mainComp.getDataset().drawerwidth;

  if (offset > 0 && status == 0) {
    setCompTransX(mainComp, Math.min(drawerWidth, offset))
  } else if (offset < 0 && status == 1) {
    setCompTransX(mainComp, Math.max(0, offset))
  }
}

Why use WXS

Mini programs are very similar to web development in many ways, but there are some differences under the hood. In web pages, rendering and script execution are performed in the same thread (so executing scripts may cause the entire page to freeze); mini-programs run the logic layer (JS scripts) and rendering layer (WXML and WXSS) in different threads respectively, and threads communicate through the client (Native).

Therefore, if you use JS scripts to respond to events, each time touchmove is triggered, two inter-process communications will be generated (as shown in the left figure below), and the communication overhead is large; at the same time, "setData rendering will also block other script executions" (the document says so, and I don't know why). Since a gesture triggers a huge number of touchmove events, the above reasons will cause animation jams.

The WXS function runs at the view layer and does not have the above problem (as shown in the right figure below).

Conclusion & References

The above are several ways to implement the drawer menu of native applets. I hope it will be helpful to you. You are welcome to discuss and correct any omissions in the article.

Click the link to view the complete code in the Mini Program Development Tool (sharing code snippets using the Mini Program Development Tool has certain requirements for the development tool version). The code snippet he shared is a bit mysterious. If you fail to open it directly, you can try to enter the link or the last ID of the link directly in "Project-Import Code Snippet" after logging in.

References:

Mini Program Framework/View Layer/Event System/WXS Response Event

Official demo

Mini Program Host Environment

This is the end of this article about the native implementation of the left-sliding drawer menu in mini programs. For more relevant content about the left-sliding drawer menu in mini programs, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!