【下载文档:  微信小程序左滑动显示菜单功能的实现.txt 】

---

微信小程序左滑动显示菜单功能的实现
效果图如下所示：
view








嗨！你好，{{user.name}}


{{item.name}}


















现场记录


更多...







css
view-left{
width:40%;
float:left;
height:150px;
background-color:#33AEFD;
}
left-text{
text-align: center;
color: #fff;
}
userinfo{
height:50px;
}
userImg{
border:1px solid #fff;
height:40px;
width:40px;
margin:5px;
border-radius: 100px;
float: left;
}
userImg image{
height:40px;
width:40px;
border-radius: 100px;
}
userText{
color: #fff;
line-height: 50px;
}
img-view{
height:120px;
width:80%;
margin:0 auto;
border:1px solid #33AEFD;
}
imgs{
border:2px solid #fff;
width:80px;
height:80px;
margin:20px auto;
display: block;
border-radius: 100px;
}
more-view{
width:40%;
float:left;
height:150px;
margin-left:7%;
background-color:#D1D1D1;
}
more{
margin:45% auto;
text-align:center;
color: #fff;
}
bottom{
bottom: 0px;
position: absolute;
margin: 0 auto;
width:100%;
height:50px;
}
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(255, 255, 255);
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: 68rpx;
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: {
addNumber:0,
banner_url: data.bannerList(),
nav_list: [{
name: "现场记录",
url:"../expo-list/expo-list"
},{
name: "退出",
url: "../login/login"
}],
user:null,
open: false,
indicatorDots: true,//是否显示面板指示点
autoplay: true,//是否开启自动切换
interval: 3000,//自动切换时间间隔
duration: 500//滑动动画时长
},
gotoUrl:function(e){
wx.navigateTo({
url: e.currentTarget.dataset.id
})
},
//列表的操作函数
open_list: function () {
//此处进行操作
this.setData({
open: false
});
},
//左侧导航的开关函数
offCanvas: function () {
if (this.data.open) {
this.setData({
open: false
});
} else {
this.setData({
open: true
});
}
},
})
源码下载：http://download.csdn.net/download/qq_30641447/10475865