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


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结合css实现网页换肤功能
Nov 02 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
动态加载js的方法汇总
Feb 13 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
利用JS实现数字增长
Jul 28 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 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
session 的生命周期是多长
2006/10/09 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
python+mysql实现简单的web程序
2014/09/11 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
python排序方法实例分析
2015/04/30 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
Python列表list排列组合操作示例
2018/12/18 Python
python标记语句块使用方法总结
2019/08/05 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
职工运动会邀请函
2014/01/19 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
高考励志标语
2014/06/05 职场文书
员工加薪申请报告
2015/05/15 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
英雄儿女观后感
2015/06/09 职场文书
春晚观后感
2015/06/11 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python