微信小程序之自定义抽屉菜单（从下拉出）实例 —— 微信小程序实战系列（7）

wxml：

button

菜单1

菜单2

菜单3

菜单4

菜单5

wxss：

/button/

.btn {

width: 80%;

padding: 20rpx 0;

border-radius: 10rpx;

text-align: center;

margin: 40rpx 10%;

background: #0C1939;

color: #fff;

}

/mask/

.drawer_screen {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

z-index: 1000;

background: #000;

opacity: 0.2;

overflow: hidden;

}

/content/

.drawer_attr_box {

width: 100%;

overflow: hidden;

position: fixed;

bottom: 0;

left: 0;

z-index: 1001;

background: #fff;

}

.drawer_content {

padding: 20rpx 40rpx;

height: 470rpx;

overflow-y: scroll;</