微信小程序语言包侧滑导航菜单示例（弹出窗口弹出式,左侧不动,右侧滑动)

本文实例讲述了微信小程序语言包侧滑导航菜单。分享给大家供大家参考，具体如下：

实现的目标——YDUI的弹出组件

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

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

页面结构

view class='page' -下层左侧导航-view class=' page-bottom ' view class=' page-content ' view bind tap=' open _ list ' wx : for-items=' { { nav _ list } } ' class=' page-list ' text { { item } }/text/view/view/view-上层右侧展示页面- view class='page-top {{open '？页面状态' : ' ' } '-上层右侧展示页面遮罩层- view class='page-mask {{open '？"页面-掩码-显示" } } "绑定点击="画布外"/view -列表按钮-image class=' left-nav ' bind tap=' off canvas ' src=' http :/./images/btn.png'/image -轮播代码，可以不要-scroll-view scroll-y=' true ' style=' height :200 px ' class=' page-body ' bindscrolltolower=' load more ' view class=' swiper ' swiper class=' swiper-box ' indicator-dots=' { { indicator dots } } ' vertical=' { { vertical } } ' autoplay=' { { autoplay } } ' interval=' { { interval } } ' duration=' { { duration } ' indicator-color=' # fff ' indicator-active-color./Bloglist/Bloglist ' swiper-item block wx : if=' { { item } } ' image class=' imgw ' src=' http : { { item }。URL } '模式=' aspectFill '/block wx : else image src=' http :/./images/default _ pic。png ' mode=' aspectFill '/image/block/swiper-item/navigator/block/swiper/view/scroll-view/view/view wxss

佩奇。页面{身高： 100%；字体系列： '方平' SC '，' Helvetica纽'，Helvetica，'机器人无后援'，'微软雅黑，无衬线；}/*左侧导航列表*/.页面底部{身高： 100%；宽度： 75%;位置：固定；背景-color: rgb(0，68，97)；z-index : 0；}.页面列表{ color : white padd : 30 rpx 0 30 rpx 40 rpx；}/*右侧展示层*/.页面顶端{位置：相对；top : 0；左转：0宽度： 750 rpx高度： 100%;背景-color: rgb(57，125，230)；z-index : 0；过渡：所有0.4秒轻松；-WebKit-transit :所有0.4s轻松版；}.页面状态{ transform:旋转(0度)缩放(1)平移(75%,0%);-webkit-transform:旋转(0度)比例(1)平移(75%,0%);}.imgw { width :100%；}/*右侧列表按钮*/.首页。左侧导航{位置：固定；宽度： 68 rpxheight : 38 rpxleft : 20 rpxbottom : 20 rpx }/*右侧遮罩层*/.页面掩码{位置：绝对值；宽度： 100%;高度： 100%;top : 0；左： 0；背景-color: rgba(0，0，0，0.5)；z指数： 998；}.页面掩码显示{ display: none}js

var app=GetApp()；定义变量数据=必需('././utils/data。js’)；页面({ /** *页面的初始数据*/data : { banner _ URL :数据。横幅列表()、nav_list: ['ES6学习之路，' CSS特效VUE实战','微信小程序]，open: false，indicatorDots: true，//是否显示面板指示点autoplay: true，//是否开启自动切换interval: 3000，//自动切换时间间隔工期： 500//滑动动画时长}, //列表的操作函数open_list:函数(){ //此处进行操作这个。setdata({ open : false })；}, //左侧导航的开关函数offCanvas:函数(){ if(this。数据。打开){这个。setdata({ open : false })；} else { this。setdata({ open : true })；} }})总结：

1.右边显示的动画可以直接完全由类定义，然后通过切换类-减少js对dom中样式的操作来改变动画的控制。2.记得在左侧菜单导航操作结束时open=false来恢复页面。

演示源代码

点击这里下载这个网站。

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