微信小程序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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
点击文章内容处弹出页面代码
Oct 01 Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 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
关于文本留言本的分页代码
2006/10/09 PHP
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
微信支付开发发货通知实例
2016/07/12 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
微信小程序实现城市列表选择
2018/06/05 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
Python基础之函数用法实例详解
2014/09/10 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
数控加工专业毕业生自荐信
2013/09/27 职场文书
中药学自荐信
2014/06/15 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
学术会议开幕词
2016/03/03 职场文书
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js