微信小程序左滑动显示菜单功能的实现

效果图如下所示：

view

<view class="page"> 
 <!--下层左侧导航--> 
 <view class="page-bottom"> 
 <view class="page-content"> 
 <view class="userinfo"> 
 <view class="userImg"> 
 <image src='/images/user.png'></image> 
 </view> 
 <view class="userText">嗨！你好，{{user.name}}</view> 
 </view> 
 <view bindtap="open_list" wx:for-items="{{nav_list}}" class="page-list"> 
 <view bindtap='gotoUrl' data-id='{{item.url}}'>{{item.name}}</view> 
 </view> 
 </view> 
 </view> 
 <!--上层右侧展示页面--> 
 <view class="page-top {{open ? 'page-state' : ''}}"> 
 <!--上层右侧展示页面遮罩层--> 
 <view class="page-mask {{open ? '' : 'page-mask-show'}}" bindtap="offCanvas"></view> 
 <!--列表按钮--> 
 <image class="left-nav" bindtap="offCanvas" src="https://www.gxlcms.com/images/Category.png"></image> 
 <!--轮播代码，可以不要--> 
 <scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore"> 
 <view class="swiper"> 
 <view class="sim-panel" style='margin:0px auto;width:100%;padding-top:7%'> 
 <view style='margin-left:7%;width:100%;'> 
 <view class="view-left" bindtap='gotoLocal' > 
 <view class="img-view"> 
 <image src='/images/camera.png' class="imgs"></image> 
 </view> 
 <view class="left-text">现场记录</view> 
 </view> 
 <view class="more-view"> 
 <view class="more" >更多...</view> 
 </view> 
 </view> 
 </view> 
 </view> 
 </scroll-view> 
 </view> 
</view> 

css

view-left{ 
 width:40%; 
 float:left; 
 height:150px; 
 background-color:#33AEFD; 
} 
left-text{ 
 text-align: center; 
 color: #fff; 
} 
userinfo{ 
 height:50px; 
} 
userImg{ 
 border:1px solid #fff; 
 height:40px; 
 width:40px; 
 margin:5px; 
 border-radius: 100px; 
 float: left; 
} 
userImg image{ 
 height:40px; 
 width:40px; 
 border-radius: 100px; 
} 
userText{ 
 color: #fff; 
 line-height: 50px; 
} 
img-view{ 
 height:120px; 
 width:80%; 
 margin:0 auto; 
 border:1px solid #33AEFD; 
} 
imgs{ 
 border:2px solid #fff; 
 width:80px; 
 height:80px; 
 margin:20px auto; 
 display: block; 
 border-radius: 100px; 
} 
more-view{ 
 width:40%; 
 float:left; 
 height:150px; 
 margin-left:7%; 
 background-color:#D1D1D1; 
} 
more{ 
 margin:45% auto; 
 text-align:center; 
 color: #fff; 
} 
bottom{ 
 bottom: 0px; 
 position: absolute; 
 margin: 0 auto; 
 width:100%; 
 height:50px; 
} 
page,.page { 
 height: 100%; 
 font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Droid Sans Fallback', 'Microsoft Yahei', sans-serif; 
} 
/*左侧导航列表 */ 
page-bottom{ 
 height: 100%; 
 width: 75%; 
 position: fixed; 
 background-color: rgb(0, 68, 97); 
 z-index: 0; 
} 
page-list{ 
 color: white; 
 padding: 30rpx 0 30rpx 40rpx; 
} 
/*右侧展示层 */ 
page-top{ 
 position: relative; 
 top: 0; 
 left:0; 
 width: 750rpx; 
 height: 100%; 
 background-color: rgb(255, 255, 255); 
 z-index: 0; 
 transition: All 0.4s ease; 
 -webkit-transition: All 0.4s ease; 
} 
page-state{ 
 transform: rotate(0deg) scale(1) translate(75%,0%); 
 -webkit-transform: rotate(0deg) scale(1) translate(75%,0%); 
} 
imgw{width:100%;} 
/*右侧列表按钮 */ 
page-top .left-nav{ 
 position: fixed; 
 width: 68rpx; 
 height: 68rpx; 
 left: 20rpx; 
 bottom: 20rpx; 
} 
/*右侧遮罩层 */ 
page-mask{ 
 position: absolute; 
 width: 100%; 
 height: 100%; 
 top: 0; 
 left: 0; 
 background-color: rgba(0,0,0,0.5); 
 z-index: 998; 
} 
page-mask-show{ 
 display: none; 
} 

js

var app = getApp(); 
var data = require('../../utils/data.js'); 
Page({ 
 /** 
 * 页面的初始数据 
 */ 
 data: { 
 addNumber:0, 
 banner_url: data.bannerList(), 
 nav_list: [{ 
 name: "现场记录", 
 url:"../expo-list/expo-list" 
 },{ 
 name: "退出", 
 url: "../login/login" 
 }], 
 user:null, 
 open: false, 
 indicatorDots: true,//是否显示面板指示点 
 autoplay: true,//是否开启自动切换 
 interval: 3000,//自动切换时间间隔 
 duration: 500//滑动动画时长 
 }, 
 gotoUrl:function(e){ 
 wx.navigateTo({ 
 url: e.currentTarget.dataset.id 
 }) 
 }, 
 //列表的操作函数 
 open_list: function () { 
 //此处进行操作 
 this.setData({ 
 open: false 
 }); 
 }, 
 //左侧导航的开关函数 
 offCanvas: function () { 
 if (this.data.open) { 
 this.setData({ 
 open: false 
 }); 
 } else { 
 this.setData({ 
 open: true 
 }); 
 } 
 }, 
}) 

源码下载：https://download.csdn.net/download/qq_301447/10475865