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

实现的目标语言包的离开画布效果

点击列表—- 右侧展示页面不动，左侧导航滑动—- 点击右侧遮罩层或者左侧选项—- 左侧还原，右侧去掉遮罩层

实现方案2:左右分上下两层，左侧滑动，右侧不动

WXML

view class=' page ' view class=' page-top { { open？page-top-show ' : ' ' } ' view class=' nav-list ' wx : for-items=' { { nav _ list } } ' bind tap=' open _ list ' data-title=' { { item } } ' text { { item } }/text/view/view class=' page-bottom ' image class=' off-nav-list ' bind tap=' off _ canvas ' src=' http 3360././图片/BTN。png/image view class=' page-bottom-content ' text { { text } }/text/view view class=' page-mask { { open？"页面-掩码-隐藏" } } " bind tap=" off _ canvas "/view/view/view XSS

佩奇。页面{身高： 100%；字体系列： '方平' SC '，' Helvetica纽'，Helvetica，'机器人无后援'，'微软雅黑，无衬线；}/*左侧导航*/.页面顶端{位置：固定；宽度： 75%;高度： 100%;top : 0；左： 0；背景-color: rgb(0，68，97)；变压器：旋转(0度)比例(1)平移(-100%,0%);-webkit-transform:旋转(0度)比例(1)平移(-100%,0%);过渡：全0.4s轻松；z指数： 998；}.页面-顶部-显示{ transform:旋转(0度)比例(1)平移(0%,0%);-webkit-transform:旋转(0度)比例(1)平移(0%,0%);}.导航列表{ padd : 30 rpx 0 30 rpx 40 rpxcolor: # fff}/*右侧展示*/.页面底部{身高： 100%；背景-color: rgb(57，125，230)；相对位置：}.脱离导航列表{位置：固定；宽度： 60 rpx高度： 50 rpxtop: 20rpxleft:20rpx}。页面-底部-内容{ padd :100 rpx 20 rpx 30 rpxcolor: # fff}。页面掩码{宽度： 100%；高度： 100%;背景-color:rgba(0，0，0，0.5)；绝对位置：top : 0；左： 0；z指数： 10；}.页面掩码隐藏{ display: none}JS

var app=GetApp()；定义变量数据=必需('././utils/data。js’)；页面({ /** *页面的初始数据*/data: { text: 'ES6学习之路，nav_list: ['ES6学习之路，' CSS特效VUE实战','微信小程序]，open: false }，//列表的操作函数open_list:函数{这个。setdata({ text : opts。当前目标。数据集。标题，开：假})；}, //左侧导航的开关函数off_canvas:函数(){ this.data.open？这个。setdata({ open : false }):此。setdata({ open : true })；}})总结：

1.代码简化：画布外函数简化代码，采用三目表达式，简单切清晰；

2.渲染：注意对数据对象中属性进行赋值时，要采用this.setData()方法，否则属性改变不会重新渲染（例如：这个。数据。text=opts。当前目标。数据集。标题；)这样文本的值改变，页面不会重新渲染文本；

3.代码简化：this.data.open？这个。setdata({ open : false }):此。setdata({ open : true })；简化为这个。setdata({ :打开这个。数据。打开？false : true })；

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