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


Posted in Javascript onJune 14, 2018

效果图如下所示:

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

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

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

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

Javascript 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
Vue实现table上下移动功能示例
Feb 21 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
vue中如何让子组件修改父组件数据
Jun 14 #Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 #Javascript
MVVM框架下实现分页功能示例
Jun 14 #Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 #jQuery
React 组件间的通信示例
Jun 14 #Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 #Javascript
详解React中setState回调函数
Jun 14 #Javascript
You might like
PHP函数in_array()使用详解
2014/08/20 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
javascript 跳转代码集合
2009/12/03 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
js href的用法
2010/05/13 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
document.createElement()用法
2013/03/13 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
Three.js基础部分学习
2017/01/08 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
angular 服务随记小结
2019/05/06 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
python3中确保枚举值代码分析
2020/12/02 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
写好自荐信的技巧
2013/11/08 职场文书
中学生期末评语
2014/02/03 职场文书
致铅球运动员加油稿
2014/02/13 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
房屋出租协议书
2014/04/10 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis