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


            效果图如下所示：





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







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 

   }); 

  } 

 }, 

}) 



源码下载：http://download.csdn.net/download/qq_30641447/10475865