微信小程序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 相关文章推荐
popdiv
Jul 14 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
微信小程序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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
简单了解Python中的几种函数
2017/11/03 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
社区母亲节活动记录
2014/03/06 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
分公司负责人任命书
2014/06/04 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
Python Pandas解析读写 CSV 文件
2022/04/11 Python