微信小程序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 相关文章推荐
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
js实现ajax的用户简单登入功能
Jun 18 Javascript
JavaScript canvas实现文字时钟
Jan 10 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
PHP写MySQL数据 实现代码
2009/06/15 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
PHP图片上传代码
2013/11/04 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
asp.net和php的区别点总结
2019/10/10 PHP
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Python批量更改文件名的实现方法
2017/10/29 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
如何基于Python创建目录文件夹
2019/12/31 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
公益活动邀请函
2014/02/05 职场文书
党委班子对照检查材料
2014/08/19 职场文书
党性分析自查总结
2014/10/14 职场文书
2016高考感言
2015/08/01 职场文书
医院感染管理制度
2015/08/05 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript