微信小程序抽屉组件代码，支持标题和底部按钮固定，内容区域可滚动，且宽度和高度自适应屏幕。

整理一个简洁、清晰且功能完整的微信小程序抽屉组件代码，确保它能够自适应不同屏幕尺寸，并满足以下需求：

1. 标题和按钮固定：标题在顶部，按钮在底部。

2. 内容区域滚动：当内容超出最大高度时，内容区域可滚动。

3. 自适应屏幕尺寸：宽度为屏幕宽度，高度不超过屏幕高度。

4. 底部按钮保持安全距离：避免被系统导航栏遮挡。

以下是完整的代码实现：

---

1. 组件结构

drawer/
├── drawer.wxml
├── drawer.wxss
├── drawer.js
├── drawer.json

---

2. 实现代码

2.1 drawer.wxml

<view class="drawer-container" wx:if="{
  
  {show}}" catchtouchmove="preventTouchMove">
  <view class="drawer-mask" bindtap="onMaskTap" style="background-color: {
  
  {maskColor}};"></view>
  <view class="drawer-content" style="width: {
  
  {width}}px; max-height: {
  
  {maxHeight}}px; transform: translateY({
  
  {translateY}}px); transition: transform 0.3s ease;">
    <view class="drawer-header" wx:if="{
  
  {showHeader}}">
      <text class="drawer-title">{
  
  {title}}</text>
    </view>
    <view class="drawer-body">
      <slot></slot>
    </view>
    <view class="drawer-footer" wx:if="{
  
  {buttons.length > 0}}" style="padding-bottom: {
  
  {safeAreaInsets.bottom}}px;">
      <bl