<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> 

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; } 

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    });   }  }, })