溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

微信小程序 特效菜單抽屜效果實(shí)例代碼

發(fā)布時(shí)間：2020-09-16 06:22:02 來(lái)源：腳本之家 閱讀：252 作者：lqh 欄目：web開(kāi)發(fā)

實(shí)現(xiàn)效果圖：

抽屜菜單是app上常見(jiàn)的菜單設(shè)計(jì)方式，典型的抽屜菜單如下圖所示

微信小程序 特效菜單抽屜效果實(shí)例代碼

下面展示如何基于微信小程序?qū)崿F(xiàn)抽屜菜單,最終效果如下圖所示： 

微信小程序 特效菜單抽屜效果實(shí)例代碼

頁(yè)面包含一個(gè)主頁(yè)和抽屜菜單頁(yè)，為了實(shí)現(xiàn)滑動(dòng)效果，頁(yè)面采用absolute布局，代碼如下 

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>

index.wxss

.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;
}

程序綁定了主頁(yè)的touch事件和tap事件，并且使用catchtouchmove阻止了move事件的傳遞，因?yàn)樵谡鏅C(jī)環(huán)境下頁(yè)面會(huì)自動(dòng)響應(yīng)滑動(dòng)事件，注意不要catch start和end事件，這會(huì)導(dǎo)致無(wú)法觸發(fā)tap事件。

首先定義一些數(shù)據(jù)來(lái)記錄滑動(dòng)過(guò)程和狀態(tài)

 drawerMenuMoveData: {
  check: false,  //是否觸發(fā)滑動(dòng)操作
  state:0,  //0:初始狀態(tài) 1:菜單彈出中狀態(tài) 2:菜單彈入狀態(tài)中 3:菜單彈出狀態(tài)
  firstTouchX:0, //首次觸摸X坐標(biāo)值
  touchCheckX:60, //觸發(fā)滑動(dòng)的觸摸X
  moveX:0,  // 滑動(dòng)操作橫向的移動(dòng)距離
  maxMoveX: (app.globalData.deviceInfo.windowWidth - 60), //抽屜菜單最大移動(dòng)距離
  lastTranlateX: 0 //上次動(dòng)畫效果的平移距離，用于校準(zhǔn)left值
 },

之后就是滑動(dòng)事件的響應(yīng)處理 

touchstart事件，首先判斷當(dāng)前狀態(tài)，然后根據(jù)觸摸位置判斷是否激活滑動(dòng)狀態(tài)

 onMainPageTouchstart: function(e) {
  var data = this.drawerMenuMoveData;
  var clientX = e.touches[0].clientX;
  //初識(shí)狀態(tài)
  if (data.state === 0) {
   if (clientX <= data.touchCheckX && clientX > 20) {
    data.check = true;
    data.state = 1;
    data.firstTouchX = clientX;
   }
  }
  //菜單彈出狀態(tài)
  else if (data.state === 3) {
   if (clientX >= data.maxMoveX) {
    data.check = true;
    data.state = 2;
    data.firstTouchX = clientX;
   }
  } 
 },

touchmove 事件，首先判斷是否處于滑動(dòng)狀態(tài)，之后根據(jù)當(dāng)前模式來(lái)計(jì)算主頁(yè)和菜單頁(yè)的left值來(lái)產(chǎn)生滑動(dòng)效果

 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)
   {
    //處理邊界狀態(tài)
    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轉(zhuǎn)為rpx
     moveX = moveX * pixelRatio;
     mainPageLeft = moveX;
     drawerMenuLeft = -800 + moveX;
    }
   }
   else if (data.state === 2) {
    //處理邊界狀態(tài)
    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轉(zhuǎn)為rpx
     moveX = moveX * pixelRatio;
     var maxMoveX = data.maxMoveX * pixelRatio;
     mainPageLeft = maxMoveX + moveX;
     drawerMenuLeft = maxMoveX -800 + moveX;
    }
   }

   this.setData({mainPageLeft: mainPageLeft, 
          drawerMenuLeft: drawerMenuLeft});
  }
 },

touchend事件 根據(jù)滑動(dòng)的距離來(lái)判斷菜單是否彈出，并創(chuàng)建滑動(dòng)動(dòng)畫

 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;
   //滑動(dòng)距離是否超過(guò)窗口寬度一半
   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;
   }
   //滑動(dòng)距離是否超過(guò)窗口寬度一半
   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()
  });
 },

tap事件, 如果當(dāng)前是彈出狀態(tài)，則將菜單彈回

 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()
  });
 }

總體邏輯并不復(fù)雜，主要是做好狀態(tài)判斷和坐標(biāo)運(yùn)算，但有些問(wèn)題需要注意

1: 微信小程序提供了rpx單位用于適配設(shè)備，但是各種滑動(dòng)事件和動(dòng)畫的單位通常是px，因此需要進(jìn)行轉(zhuǎn)換，轉(zhuǎn)換方法為 rpx = px * pixelRatio，其中pixelRatio可以通過(guò) wx.getSystemInfoSync()獲取

2: 當(dāng)對(duì)組件使用通過(guò)wx.createAnimation 創(chuàng)建的動(dòng)畫時(shí)，小程序框架會(huì)給組件添加transform屬性，其中translateX值會(huì)和left屬性相互作用，因此計(jì)算left值時(shí)需要處理translateX的值。

3: 由于在真機(jī)環(huán)境下，頁(yè)面左滑(初始觸摸點(diǎn)在左側(cè)邊界時(shí))默認(rèn)行為是返回上一頁(yè)或退出小程序(取決與是否是第一級(jí)頁(yè)面), 抽屜菜單會(huì)和該行為發(fā)生沖突。

另外目前還不支持swiper操作，后續(xù)有機(jī)會(huì)再補(bǔ)上吧。

源碼下載：http://xiazai.jb51.net/201701/yuanma/wx-drawermenu-master(jb51.net).rar

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手