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

<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="/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> 

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

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