微信小程序左滑动显示菜单功能的实现

微信小程序左滑动显示菜单功能的实现

效果图如下所示：

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;

backgrounhttp://d-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

});

}

},

})

源码下载：https://download.csdn.net/download/qq_30641447/10475865

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。