小程序弹出层/抽屉封装 （抖音小程序）

最近忙于开发抖音小程序，最想吐槽的就是，既没有适配的UI框架，百度上还找不到关于抖音小程序的案列，我真的很裂开啊，于是我通过大模型封装了一套代码

效果如下

介绍

可以看到 这个弹出层是支持关闭和标题显示的，同时这个出场肯定是从下到上的，当然它肯定是支持任意方向弹出的 效果类似于element ui 的抽屉效果

代码

在 components 新建组件 drawer

抽屉的结构部分

<!-- drawer.wxml -->
<view class="drawer-container" tt:if="{{isVisible}}"><view class="drawer-mask" style="{{maskStyle}}" bindtap="onMaskClick" tt:if="{{mask}}"></view><view class="drawer-content" style="{{drawerStyle}}" catchtouchmove="stopPropagation"><!-- 头部区域 --><view class="drawer-header" tt:if="{{showTitle || showClose}}"><text class="drawer-title" tt:if="{{showTitle && title}}">{{title}}</text><view class="header-spacer" tt:if="{{!title && showClose}}"></view><view class="drawer-close-btn" tt:if="{{showClose}}" bindtap="onCloseClick"><text class="close-icon">×</text></view></view><!-- 内容区域 --><view class="drawer-body"><slot></slot></view></view></drawer-container>

抽屉逻辑处理部分

// drawer.js
Component({properties: {show: {type: Boolean,value: false,observer: 'toggleDrawer'},direction: {type: String,value: 'bottom', // left, right, top, bottomobserver: 'updatePosition'},width: {type: String,value: '100%'},height: {type: String,// value: '100%'},mask: {type: Boolean,value: true},maskClosable: {type: Boolean,value: true},showClose: {type: Boolean,value: true},title: {type: String,value: ''},showTitle: {type: Boolean,value: true},duration: {type: Number,value: 300}},data: {drawerStyle: '',maskStyle: '',isVisible: false,isTransitioning: false},methods: {toggleDrawer(newVal) {if (newVal) {this.openDrawer();} else {this.closeDrawer();}},updatePosition() {if (!this.data.isVisible) {this.setInitialPosition();}},setInitialPosition() {const { direction, width, height } = this.properties;let style = `position: fixed; z-index: 10000;`;switch(direction) {case 'left':style += `width: ${width}; height: ${height}; top: 0; left: 0; transform: translateX(-100%);`;break;case 'right':style += `width: ${width}; height: ${height}; top: 0; right: 0; transform: translateX(100%);`;break;case 'top':style += `width: ${width}; height: ${height}; top: 0; left: 0; transform: translateY(-100%);`;break;case 'bottom':style += `width: ${width}; height: ${height}; bottom: 0; left: 0; transform: translateY(100%);`;break;}this.setData({drawerStyle: style});},openDrawer() {if (this.data.isVisible || this.data.isTransitioning) return;const { direction, duration } = this.properties;// 先设置初始位置并显示this.setInitialPosition();this.setData({isVisible: true,maskStyle: 'opacity: 0;'});// 强制重排后应用动画setTimeout(() => {let drawerStyle = this.data.drawerStyle;const transformProp = direction.includes('left') || direction.includes('right') ? 'translateX' : 'translateY';drawerStyle = drawerStyle.replace(`${transformProp}(-100%)`, `${transformProp}(0)`);drawerStyle = drawerStyle.replace(`${transformProp}(100%)`, `${transformProp}(0)`);drawerStyle += `transition: transform ${duration}ms cubic-bezier(0.25, 0.8, 0.25, 1);`;this.setData({drawerStyle,maskStyle: `opacity: 0.7; transition: opacity ${duration}ms cubic-bezier(0.25, 0.8, 0.25, 1);`});this.data.isTransitioning = true;setTimeout(() => {this.data.isTransitioning = false;this.triggerEvent('open');}, duration);}, 10);},closeDrawer() {if (!this.data.isVisible || this.data.isTransitioning) return;const { direction, duration } = this.properties;let drawerStyle = this.data.drawerStyle;const transformProp = direction.includes('left') || direction.includes('right') ? 'translateX' : 'translateY';// 添加关闭动画drawerStyle = drawerStyle.replace(`${transformProp}(0)`, `${transformProp}(${direction.includes('left') || direction.includes('top') ? '-100%' : '100%'})`);drawerStyle += `transition: transform ${duration}ms cubic-bezier(0.25, 0.8, 0.25, 1);`;this.setData({drawerStyle,maskStyle: `opacity: 0; transition: opacity ${duration}ms cubic-bezier(0.25, 0.8, 0.25, 1);`});this.data.isTransitioning = true;// 动画结束后隐藏setTimeout(() => {this.setData({isVisible: false});this.data.isTransitioning = false;this.triggerEvent('close');}, duration);},onMaskClick() {if (this.properties.maskClosable && !this.data.isTransitioning) {this.closeDrawer();}},onCloseClick() {if (!this.data.isTransitioning) {this.closeDrawer();}},stopPropagation() {}},attached() {this.setInitialPosition();}
});

抽屉的基本样式

/* drawer.wxss */
.drawer-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9999;
}.drawer-mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.6);backdrop-filter: blur(2px);
}.drawer-content {position: fixed;background-color: #fff;box-shadow: -2px 0 15px rgba(0, 0, 0, 0.1);overflow: hidden;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;-webkit-overflow-scrolling: touch;
}/* 右侧抽屉的阴影 */
.drawer-content[style*="right: 0"] {box-shadow: -2px 0 15px rgba(0, 0, 0, 0.1);
}/* 左侧抽屉的阴影 */
.drawer-content[style*="left: 0"][style*="width"] {box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
}/* 顶部抽屉的阴影 */
.drawer-content[style*="top: 0"][style*="height"] {box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}/* 底部抽屉的阴影 */
.drawer-content[style*="bottom: 0"][style*="height"] {box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
}.drawer-title {font-size: 32rpx;font-weight: 500;color: #333;
}.drawer-close-btn:hover {background-color: rgba(0, 0, 0, 0.1);
}.close-icon {font-size: 36rpx;color: #333;
}/* 内容区域 */
.drawer-body {height: calc(100% - 100rpx);/* 减去头部高度 */overflow-y: auto;padding: 40rpx;box-sizing: border-box;
}/* drawer.wxss 新增样式 */
.drawer-header {position: relative;padding: 30rpx 40rpx;min-height: 100rpx;box-sizing: border-box;display: flex;align-items: center;justify-content: space-between;border-bottom: 1rpx solid #eee;
}.header-spacer {flex-grow: 1;
}.drawer-close-btn {position: absolute;top: 30rpx;right: 40rpx;width: 48rpx;height: 48rpx;border-radius: 50%;background-color: rgba(0, 0, 0, 0.05);display: flex;align-items: center;justify-content: center;transition: background-color 0.2s;z-index: 10;
}

对应文件的json引入使用

{"navigationBarTitleText": "商品详情","usingComponents": {"Drawer": "/components/Drawer/Drawer"},"allowsBounceVertical": "NO"
}

界面部分

<Drawer show="{{dateShow}}" showTitle="{{true}}" showClose="{{true}}" title="账单详情" class="detail-popup" bind:close="handlePopupClose"><view class="repayment-popup"><view class="repayment-popup-item"><text>账期</text><text>第{{repaymentTime.periods}}期</text></view><view class="repayment-popup-item"><text>账单日</text><text>{{util.formatDateToDay(repaymentTime.date)}}</text></view><view class="repayment-popup-item"><text>账单总额</text><text>{{util.moneyFormatMinZero(repaymentTime.waitPay)}}</text></view><view class="repayment-popup-item"><text>待还本金</text><text>{{util.moneyFormatMinZero(repaymentTime.waitPrincipalMoney)}}</text></view><view class="repayment-popup-item"><text>待还滞纳金</text><text>{{util.moneyFormatMinZero(repaymentTime.waitOverdueMoney)}}</text></view></view>
</Drawer>

界面逻辑部分

const app = getApp();
Page({data: {dateShow: false,},appreciationEvent() {this.setData({dateShow: true,});},handlePopupClose() {this.setData({dateShow: false});}

完结啦 🎉 🎉 🎉