微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)


Posted in Javascript onJanuary 23, 2019

本文实例讲述了微信小程序MUI侧滑导航菜单。分享给大家供大家参考,具体如下:

实现的目标MUI的off canvas效果

点击列表 —- 右侧展示页面不动,左侧导航滑动 —- 点击右侧遮罩层或者左侧选项 —- 左侧还原,右侧去掉遮罩层

实现方案2:左右分上下两层,左侧滑动,右侧不动

 微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)

WXML

<view class="page">
 <view class="page-top {{open ? 'page-top-show' : ''}}">
  <view class="nav-list" wx:for-items="{{nav_list}}" bindtap="open_list" data-title="{{item}}">
   <text>{{item}}</text>
  </view>
 </view>
 <view class="page-bottom">
  <image class="off-nav-list" bindtap="off_canvas" src="../../images/btn.png"></image>
  <view class="page-bottom-content">
   <text>{{text}}</text>
  </view>
  <view class="page-mask {{open ? '' : 'page-mask-hide'}}" bindtap="off_canvas"></view>
 </view>
</view>

WXSS

page,.page {
 height: 100%;
 font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Droid Sans Fallback', 'Microsoft Yahei', sans-serif;
}
/*左侧导航 */
.page-top{
 position: fixed;
 width: 75%;
 height: 100%;
 top: 0;
 left: 0;
 background-color: rgb(0, 68, 97);
 transform: rotate(0deg) scale(1) translate(-100%,0%);
 -webkit-transform: rotate(0deg) scale(1) translate(-100%,0%);
 transition: all 0.4s ease;
 z-index: 998;
}
.page-top-show{
 transform: rotate(0deg) scale(1) translate(0%,0%);
 -webkit-transform: rotate(0deg) scale(1) translate(0%,0%);
}
.nav-list{
 padding: 30rpx 0 30rpx 40rpx;
 color:#fff;
}
/*右侧展示 */
.page-bottom{
 height: 100%;
 background-color: rgb(57, 125, 230);
 position: relative;
}
.off-nav-list{
 position: fixed;
 width: 60rpx;
 height: 50rpx;
 top: 20rpx;
 left:20rpx;
}
.page-bottom-content{
 padding:100rpx 20rpx 30rpx;
 color: #fff;
}
.page-mask{
 width: 100%;
 height: 100%;
 background-color:rgba(0,0,0,0.5);
 position: absolute;
 top: 0;
 left: 0;
 z-index: 10;
}
.page-mask-hide{
 display: none;
}

JS

var app = getApp();
var data = require('../../utils/data.js');
Page({
 /**
  * 页面的初始数据
  */
 data: {
  text: 'ES6学习之路',
  nav_list: ['ES6学习之路', 'CSS特效', 'VUE实战','微信小程序'],
  open: false
 },
 //列表的操作函数
 open_list: function(opts){
  this.setData({ text: opts.currentTarget.dataset.title,open: false});
 },
 //左侧导航的开关函数
 off_canvas: function(){
  this.data.open ? this.setData({open: false}) :this.setData({open: true});
 }
})

总结:

1. 代码简化:off_canvas函数简化代码,采用三目表达式,简单切清晰;

2. 渲染:注意对data对象中属性进行赋值时,要采用this.setData()方法,否则属性改变不会重新渲染(eg:this.data.text = opts.currentTarget.dataset.title;)这样text的值改变,页面不会重新渲染text;

3. 代码简化:this.data.open ? this.setData({open: false}) :this.setData({open: true});简化为this.setData({ open: this.data.open ? false : true});

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 #Javascript
vue车牌号校验和银行校验实战
Jan 23 #Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 #Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 #Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 #Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 #Javascript
javascript json字符串到json对象转义问题
Jan 22 #Javascript
You might like
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
Express的路由详解
2015/12/10 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
Python实现异步IO的示例
2020/11/05 Python
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
我们的节日清明节活动方案
2014/03/05 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
农业项目合作意向书
2015/05/08 职场文书
党支部季度考核意见
2015/06/02 职场文书
招商银行收入证明
2015/06/17 职场文书
mysql的单列多值存储实例详解
2022/04/05 MySQL