效果圖：

page.wxml程式碼:

主頁程式碼：

<view class="home" style="{{translate}}>Home</view>

側滑選單程式碼：

<view class="page_tab">Page_tab</view>

側滑選單右側黑色陰影：

<view class='bg' bindtap='hideview' style='display:{{display}}'></view>

page.wxss程式碼:

.home {  
  position: absolute;  
  width: 750rpx;  
  height: 100%;  
  background-color: white;  
  z-index: 1;  
  transition: All 0.4s ease;  
  -webkit-transition: All 0.4s ease;  
} 
.page_tab {  
  height: 100%;  
  width: 750rpx;  
  position: fixed;  
  background-color: white;  
  z-index: 0;
}  
.bg {    
  display: none;          
  position: fixed;       
  top: 0%;    
  left: 70%;    
  width: 100%;    
  height: 100%;    
  background-color: black;    
  z-index: 1001;    
  -moz-opacity: 0.7;    
  opacity: 0.70;    
  transition:width 2s;  
  filter: alpha(opacity=70);    
}   
 

page.js程式碼：

const util = require('../../utils/util.js')
var app = getApp();
var start_clientX;
var end_clientX;

Page({
  data: {
    windowWidth: wx.getSystemInfoSync().windowWidth
  },

  touchend: function (e) {
    end_clientX = e.changedTouches[0].clientX;
    if (end_clientX - start_clientX > 120) {
      this.setData({
        display: "block",
        translate: 'transform: translateX(' + this.data.windowWidth * 0.7 + 'px);'
      })
    } else if (start_clientX - end_clientX > 0) {
      this.setData({
        display: "none",
        translate: ''
      })
    }
  },

  touchstart: function (e) {
    start_clientX = e.changedTouches[0].clientX
  },

  hideview: function () {
    this.setData({
      display: "none",
      translate: '',
    })
  }
})
 

原理分析

主要應用了css定位的知識；
首先用z-index進行堆疊，從上到下依次為：bg，home，page_tab；
1，bg   設定了display，使其隱藏且不佔空間；
        設定position：fixed；固定位置，不隨頁面滑動而滑動；
        設定左右邊距，寬高，顏色為黑色半透明；
        translate設定寬度變化，時間為2秒； （如何變化在js邏輯實現中中設定）
2，home  設定動畫，通bg頁；（觸發事件後，home頁偏移，露出最下面的page_tab）
3，page-tab   設定position：fixed；