微信小程序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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
Javascript this指针
Jul 30 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
Vue中使用vux的配置详解
May 05 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
js实现网页版贪吃蛇游戏
Feb 22 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 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 XML数据解析代码
2010/05/26 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
在Python中使用模块的教程
2015/04/27 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
Django 自动生成api接口文档教程
2019/11/19 Python
python创建子类的方法分析
2019/11/28 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
化学教师教学反思
2014/01/17 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
合作协议书模板
2014/10/10 职场文书
党员年度个人总结
2015/02/14 职场文书
不同意离婚上诉状
2015/05/23 职场文书
大学入学感言
2015/08/01 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
k8s部署redis cluster集群的实现
2021/06/24 Redis