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


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 相关文章推荐
JavaScript脚本语言在网页中的简单应用
May 13 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
Vue实现todolist删除功能
Jun 26 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 之 没有mysql支持时的替代方案
2006/10/09 PHP
PHP实现用户认证及管理完全源码
2007/03/11 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
微信小程序实现图片上传功能
2018/05/28 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
简单谈谈python中的语句和语法
2017/08/10 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
python中set()函数简介及实例解析
2018/01/09 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
Python面向对象封装操作案例详解
2019/12/31 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
EJB的基本架构
2016/09/22 面试题
本科生详细的自我评价
2013/09/19 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
Python利用folium实现地图可视化
2021/05/23 Python