效果图如下所示：
view
rush:js;">
ottom">
{{item.name}}
更多...
css
rush:js;">
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.5);
z-index: 998;
}
page-mask-show{
display: none;
}
js
<div class="jb51code">
<pre class="brush: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
});
}
},})
