微信小程序侧滑菜单实现

效果图：

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；