|
这篇文章主要介绍了微信小程序左滑动显示菜单功能的实现,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
效果图如下所示：
view
<view class="page">
<!--下层左侧导航-->
<view class="page-bottom">
<view class="page-content">
<view class="userinfo">
<view class="userImg">
<image src='/images/user.png'></image>
</view>
<view class="userText">嗨！你好，{{user.name}}</view>
</view>
<view bindtap="open_list" wx:for-items="{{nav_list}}" class="page-list">
<view bindtap='gotoUrl' data-id='{{item.url}}'>{{item.name}}</view>
</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/Category.png"></image>
<!--轮播代码，可以不要-->
<scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore">
<view class="swiper">
<view class="sim-panel" style='margin:0px auto;width:100%;padding-top:7%'>
<view style='margin-left:7%;width:100%;'>
<view class="view-left" bindtap='gotoLocal' >
<view class="img-view">
<image src='/images/camera.png' class="imgs"></image>
</view>
<view class="left-text">现场记录</view>
</view>
<view class="more-view">
<view class="more" >更多...</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
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
});
}
},
})
源码下载：https://download.csdn.net/download/qq_30641447/10475865
| 
发表于 2018-6-14 14:14:14
