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


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 相关文章推荐
一个可拖拽列宽表格实例演示
Nov 26 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
js判断两个数组相等的5种方法
May 06 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
APMServ使用说明
2006/10/23 PHP
php中计算时间差的几种方法
2009/12/31 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
前端微信支付js代码
2016/07/25 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
详解python tcp编程
2020/08/24 Python
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
物流仓储实习自我鉴定
2013/09/25 职场文书
英文版销售经理个人求职信
2013/11/20 职场文书
中职招生先进个人材料
2014/08/31 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server