小程序左滑动显示菜单

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

// pages/locaRecord/index.js
var app = getApp();
var touchDot = 0;//触摸时的原点
var time = 0;//  时间记录，用于滑动时且时间小于1s则执行左右滑动
var interval = "";// 记录/清理 时间记录
var nth = 1;// 设置活动菜单的index
var nthMax = 5;//活动菜单的最大个数
var tmpFlag = true;// 判断左右华东超出菜单最大值时不再执行滑动事件

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,//滑动动画时长

  
  },
  // 触摸开始事件
  touchStart: function (e) {
    touchDot = e.touches[0].pageX; // 获取触摸时的原点
    // 使用js计时器记录时间    
    interval = setInterval(function () {
      time++;
    }, 100);
  },
  // 触摸移动事件
  touchMove: function (e) {
    var touchMove = e.touches[0].pageX;
    // 向右滑动
    if (touchMove - touchDot >= 40 && time < 10) {
      if (tmpFlag && nth > 0) {
        nth = --nth < 0 ? 0 : nth;
        this.offCanvas();
      
      }
    }
    // touchDot = touchMove; //每移动一次把上一次的点作为原点（好像没啥用）
  },
  // 触摸结束事件
  touchEnd: function (e) {
    clearInterval(interval); // 清除setInterval
    time = 0;
    nth=1;
    tmpFlag = true; // 回复滑动事件
  },
  //列表的操作函数
  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_30641447/10475865