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


Posted in Javascript onJanuary 23, 2019

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

实现的目标—-YDUI的Popup组件

点击列表图标—-左侧的菜单栏显示—-点击关闭按钮或者右侧的遮罩层—-左侧菜单栏关闭

实现方案1:左侧菜单和右侧展示页面分为上下两层

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

wxml

<view class="page">
  <----下层左侧导航--->
  <view class="page-bottom">
    <view class="page-content">
      <view bindtap="open_list" wx:for-items="{{nav_list}}" class="page-list">
        <text>{{item}}</text>
      </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/btn.png"></image>
     <----轮播代码,可以不要--->
     <scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore">
     <view class="swiper">
      <swiper class="swiper-box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
          autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"
          indicator-color="#fff" indicator-active-color="red">
        <block wx:for-items="{{banner_url}}" wx:key="item.id">
          <navigator url="../blogList/blogList">
           <swiper-item>
            <block wx:if="{{item}}">
             <image class="imgw" src="{{item.url}}" mode="aspectFill"/>
            </block>
            <block wx:else>
             <image src="../../images/default_pic.png" mode="aspectFill"></image>
            </block>
           </swiper-item>
          </navigator>
        </block>
      </swiper>
     </view>
    </scroll-view>
  </view>
</view>

wxss

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(57, 125, 230);
 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: 38rpx;
 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: {
  banner_url: data.bannerList(),
  nav_list: ['ES6学习之路', 'CSS特效', 'VUE实战','微信小程序'],
  open: false,
  indicatorDots: true,//是否显示面板指示点
  autoplay: true,//是否开启自动切换
  interval: 3000,//自动切换时间间隔
  duration: 500//滑动动画时长
 },
 //列表的操作函数
 open_list: function(){
  //此处进行操作
  this.setData({
   open: false
  });
 },
 //左侧导航的开关函数
 offCanvas: function(){
  if(this.data.open){
   this.setData({
    open: false
   });
  }else{
   this.setData({
    open: true
   });
  }
 }
})

总结:

1. 右侧展示的动画,我们可以直接通过class将其统一定义完整,然后通过切换class来改变动画的控制—-减少了js对dom中style的操作。
2. 在左侧菜单导航操作的最后记得open=false,使页面还原。

DEMO源码

点击此处本站下载

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

Javascript 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
JavaScript 应用类库代码
Jun 02 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
angularjs 页面自适应高度的方法
Jan 17 Javascript
JavaScript实现通讯录功能
Dec 27 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
使用JavaScript保存文本文件到本地的两种方法
Jan 22 #Javascript
You might like
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
php微信开发之谷歌测距
2018/06/14 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
简单的js分页脚本
2009/05/21 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
有趣的python小程序分享
2017/12/05 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
对numpy中shape的深入理解
2018/06/15 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
培训主管岗位职责
2014/02/01 职场文书
创建文明城市标语
2014/06/16 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
MySQL数据库必备之条件查询语句
2021/10/15 MySQL