Home > Article > WeChat Applet > Detailed explanation of drawer menu examples for WeChat applet development
Drawer menu is a common menu design method on apps. A typical drawer menu is as shown below
##Drawer menu
page contains a homepage and Drawer menu page, in order to achieve the sliding effect, the page adopts absolute layout, the code is as follows
index.wxml<view id='id-main-page' class='main-page' animation='{{animationData}}' style='left:{{mainPageLeft}}rpx;' bindtouchstart='onMainPageTouchstart' catchtouchmove='onMainPageTouchmove' bindtouchend='onMainPageTouchend' bindtap='onMainPageTap'> <view class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> </view> <view class='drawer-menu' animation='{{animationData}}' style='left:{{drawerMenuLeft}}rpx;'> <view class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName2}}</text> </view> </view>
.main-page { width:100%; height:2000rpx; position: absolute; top: 0; left: 0; padding: 200rpx 0; } .drawer-menu { width: 800rpx; height:2000rpx; position: absolute; top: 0; left: -800rpx; padding: 200rpx 0; background: rgba(22, 22, 22, 1); z-index: 800; }
The program binds the touch event and tap event of the homepage , and use
catchtouchmove to prevent the delivery of the move event, because the page will automatically respond to the sliding event in a real machine environment. Be careful not to catch the start
and end
events. This will result in the tap
event not being triggered. First define some data to record the sliding process and status
drawerMenuMoveData: { check: false, //是否触发滑动操作 state:0, //0:初始状态 1:菜单弹出中状态 2:菜单弹入状态中 3:菜单弹出状态 firstTouchX:0, //首次触摸X坐标值 touchCheckX:60, //触发滑动的触摸X moveX:0, // 滑动操作横向的移动距离 maxMoveX: (app.globalData.deviceInfo.windowWidth - 60), //抽屉菜单最大移动距离 lastTranlateX: 0 //上次动画效果的平移距离,用于校准left值 },
Then the response processing of the sliding event
touchstart
event, first determine the current status, and then based on the touch Position to determine whether the sliding state is activated<pre class="brush:js;toolbar:false;"> onMainPageTouchstart: function(e) {
var data = this.drawerMenuMoveData;
var clientX = e.touches[0].clientX;
//初识状态
if (data.state === 0) {
if (clientX <= data.touchCheckX && clientX > 20) {
data.check = true;
data.state = 1;
data.firstTouchX = clientX;
}
}
//菜单弹出状态
else if (data.state === 3) {
if (clientX >= data.maxMoveX) {
data.check = true;
data.state = 2;
data.firstTouchX = clientX;
}
}
},</pre>
event, first determine whether it is in the sliding state, and then calculate the left value of the homepage and menu page according to the current mode to produce the sliding effect<pre class="brush:js;toolbar:false;"> onMainPageTouchmove: function(e) {
var data = this.drawerMenuMoveData;
var pixelRatio = app.globalData.deviceInfo.pixelRatio;
if (data.check) {
var mainPageLeft = 0, drawerMenuLeft = 0;
var moveX = e.touches[0].clientX - data.firstTouchX;
if (data.state === 1)
{
//处理边界状态
if (moveX < 0) {
moveX = 0;
}
if (moveX > data.maxMoveX) {
moveX = data.maxMoveX;
}
if (moveX >= 0 && moveX <= data.maxMoveX) {
data.moveX = moveX;
moveX = moveX - data.lastTranlateX;
//px转为rpx
moveX = moveX * pixelRatio;
mainPageLeft = moveX;
drawerMenuLeft = -800 + moveX;
}
}
else if (data.state === 2) {
//处理边界状态
if (moveX > 0) {
moveX = 0;
}
if (moveX < -data.maxMoveX) {
moveX = -data.maxMoveX;
}
if (moveX <= 0 && moveX >= -data.maxMoveX) {
data.moveX = moveX;
moveX = moveX - data.lastTranlateX;
//px转为rpx
moveX = moveX * pixelRatio;
var maxMoveX = data.maxMoveX * pixelRatio;
mainPageLeft = maxMoveX + moveX;
drawerMenuLeft = maxMoveX -800 + moveX;
}
}
this.setData({mainPageLeft: mainPageLeft,
drawerMenuLeft: drawerMenuLeft});
}
},</pre>
event determines whether the menu pops up based on the sliding distance and creates a sliding animation <pre class="brush:js;toolbar:false;"> onMainPageTouchend: function(e) {
var data = this.drawerMenuMoveData;
if (!data.check) {
return;
}
data.check = false;
data.firstTouchX = 0;
var moveX = data.moveX;
data.moveX = 0;
var animation = wx.createAnimation({duration: 100});
var translateX = 0;
var mainPageLeft = 0;
var windowWidth = app.globalData.deviceInfo.windowWidth;
if (data.state === 1)
{
if (moveX === 0 || moveX === data.maxMoveX) {
data.state = (moveX === 0) ? 0 : 3;
return;
}
mainPageLeft = moveX;
//滑动距离是否超过窗口宽度一半
if (mainPageLeft > (windowWidth / 2)) {
translateX = data.maxMoveX - moveX;
data.state = 3;
}
else {
translateX = -moveX;
data.state = 0;
}
}
else if (data.state === 2) {
if (moveX === 0 || moveX === -data.maxMoveX) {
data.state = (moveX === 0) ? 3 : 0;
return;
}
//滑动距离是否超过窗口宽度一半
mainPageLeft = data.maxMoveX + moveX
if (mainPageLeft > (windowWidth / 2)) {
translateX = -moveX;
data.state = 3;
}
else {
translateX = -mainPageLeft;
data.state = 0;
}
}
translateX += data.lastTranlateX;
data.lastTranlateX = translateX;
animation.translateX(translateX).step();
this.setData({
animationData:animation.export()
});
},</pre>
event, if it is currently in a pop-up state, the menu will pop up Bounce<pre class="brush:js;toolbar:false;"> onMainPageTap: function(e) {
var data = this.drawerMenuMoveData;
if (data.state !== 3) {
return;
}
data.state = 0;
var translateX = -data.maxMoveX;
translateX += data.lastTranlateX;
data.lastTranlateX = translateX;
var animation = wx.createAnimation({duration: 100});
animation.translateX(translateX).step();
this.setData({
animationData:animation.export()
});
}</pre>
The overall logic is not complicated. It mainly focuses on status judgment and coordinate calculation, but there are some issues that need attention
1: The WeChat applet provides rpx units for adapting devices , but the unit of various sliding events and animations is usually px, so conversion is required. The conversion method is
rpx = px * pixelRatio, where pixelRatio
can be passed wx.getSystemInfoSync ()
Get2: When using the animation created by
on a component, the applet framework will add the transform
attribute to the component, where The translateX
value will interact with the left
attribute, so the value of translateX
needs to be processed when calculating the left
value. 3: Since in a real device environment, the default behavior of sliding the page to the left (when the initial touch point is on the left border) is to return to the previous page or exit the mini program (depending on whether it is the first-level page), Drawer menus would conflict with this behavior.
In addition, the
swiper operation is not currently supported. It will be added when there is an opportunity in the future.
The above is the detailed content of Detailed explanation of drawer menu examples for WeChat applet development. For more information, please follow other related articles on the PHP Chinese website!