微信小程序开发：(抽屉)侧边栏主页的实现

微信小程序的语法和使用和前端的开发非常相似，如果做过前端开发的，再去开发小程序，上手会非常快。本篇博文来分享一下微信小程序开发的时候的侧边抽屉栏效果，侧边栏弹出菜单这个功能还是比较常见的，所以就分享出来，方便使用。

微信小程序的侧边弹出菜单栏的实现和移动端原生App的实现还是有所不同的，毕竟微信小程序的开发是基于前端开发的，使用的方法都是前端的一套逻辑，废话少说，直接上代码，具体操作步骤如下所示。

1、wxml文件的实现：

  

  

    

      

        

        

      

      

        确定退出登录么？

      

      

        

        历史记录

      

      

        

        个人中心

      

      

        

        注销登录

      

    

  

2、wxss文件的实现：

/* 全局样式 */

page, .page {

  height: 100%;

  font-family: 'PingFang SC',

                 'Helvetica Neue',

                 Helvetica,

                 'Droid Sans Fallback',

                 'Microsoft Yachei',

                 sans-serif;

}

/* 侧边栏样式 */

.page-slidebar {

  height: 100%;

  width: 450rpx;

  position: fixed;

  background-color: white;

  z-index: 1;

}

/* 控制侧边栏的内容距离顶部的距离 */

.page-content {

  padding-top: 60rpx;

}

/* 侧边栏内容的 css 样式 */

.wc {

  color: black;

  padding: 30rpx 0 30rpx 30rpx;

  border-bottom: 1px solid #eee;

}

/* 当屏幕向左滑动，出现侧边栏的时候，主页的动画样式 */

/* scale：取值范围 0~1 ，表示屏幕大小是原来的百分之几，可以自己修改成 0.8 试下*/

/* translate(60%,0%) 表示向左滑动的时候，侧边栏占用平时的宽度为 60%   */

.c-state {

  transform: rotate(0deg) scale(1) translate(60%, 0%);

  -webkit-transform: rotate(0deg) scale(1) translate(60%, 0%);

}

.userinfo {

  width: 100%;

  padding: 120rpx 0;

  background: #0e47bc;

  color: #fff;

}

.userinfo::after {

  content: "";

  display: block;

  clear: both;

}

.userinfo-avatar {

  width: 140rpx;

  height: 140rpx;

  margin: 0 40rpx;

  border-radius: 50%;

  float: left;

  overflow: hidden;

}

.userinfo-nickname {

  display: inline-block;

  height: 140rpx;

  line-height: 140rpx;

}

/*******侧边导航图标*******/

.menu_img {

  width: 26px;

  height: 26px;

  vertical-align: middle;

  margin-right: 10px;

}

3、js文件的实现：

Page({

  data: {

    open: false

  },

  // 点击左上角小图标事件

  tap_ch: function (e) {

    if (this.data.open) {

      this.setData({

        open: false

      });

    } else {

      this.setData({

        open: true

      });

    }

  },

})

具体的实现效果，如下所示：

 

以上就是本章全部内容，欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！

三掌柜的微信公众号：

三掌柜的新浪微博：