当前位置：首页 > news >正文

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

news 来源：原创 2025/7/26 15:54:54

最近忙于开发抖音小程序，最想吐槽的就是，既没有适配的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});}

完结啦 🎉 🎉 🎉

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

最近忙于开发抖音小程序，最想吐槽的就是，既没有适配的UI框架，百度上还找不到关于抖音小程序的案列，我真的很裂开啊，于是我通过大模型封装了一套代码效果如下介绍可以看到这个弹出层是支持关闭和标题显示的&#xf…...

编程日记 2025/7/26 15:54:54

map与set封装

封装map和set一般分为6步： 1.封装map与set 2.普通迭代器 3.const 迭代器 4.insert返回值处理 5.map operator【】 6.key不能修改的问题一.红黑树的改造 map与set的底层是通过红黑树来封装的，但是map与set的结点储存的值不一样，set只需要存…...

编程日记 2025/7/24 19:20:21

【C语言基础语法入门】通过简单实例快速掌握C语言核心概念

文章目录 1. Hello World：第一个C程序2. 变量与数据类型3. 运算符4. 控制结构4.1 if-else 条件判断4.2 for 循环4.3 while 循环 5. 函数6. 数组7. 指针8. 结构体总结 📣按照国际惯例，首先声明：本文只是我自己学习的理解&#xff0…...

编程日记 2025/7/22 17:32:45

Manus AI 突破多语言手写识别技术壁垒：创新架构、算法与应用解析

在人工智能领域，手写识别技术作为连接人类自然书写与数字世界的桥梁，一直备受关注。然而，多语言手写识别面临诸多技术挑战，如语言多样性、书写风格差异、数据稀缺性等。Manus AI 作为该领域的领军者，通过一系列创新技术…...

编程日记 2025/7/21 17:34:57

数字图像处理——图像压缩

背景图像压缩是一种减少图像文件大小的技术，旨在在保持视觉质量的同时降低存储和传输成本。随着数字图像的广泛应用，图像压缩在多个领域如互联网、移动通信、医学影像和卫星图像处理中变得至关重要。技术总览当下图像压缩JPEG几乎一统天下&#xff…...

编程日记 2025/7/23 22:18:28

SGLang和vllm比有什么优势？

环境： SGLang vllm 问题描述： SGLang和vllm比有什么优势？ 解决方案： SGLang和vLLM都是在大语言模型（LLM）推理和部署领域的开源项目或框架，它们各自有不同的设计目标和优势。下面我综合目前…...

编程日记 2025/7/24 8:33:49

BeanFactory和FactoryBean的区别

目录 1、Spring-core 2、控制反转（IoC） 2.1、定义 2.2、实现方式 1、BeanFactory 2、ApplicationContext 3、FactoryBean BeanFactory是容器，管理所有Bean(包括FactoryBean)，FactoryBean是被管理的Bean，只是它有…...

编程日记 2025/7/21 21:43:02

仓颉开发语言入门教程：搭建开发环境

仓颉开发语言作为华为为鸿蒙系统自研的开发语言，虽然才发布不久，但是它承担着极其重要的历史使命。作为鸿蒙开发者，掌握仓颉开发语言将成为不可或缺的技能，今天我们从零开始，为大家分享仓颉语言的开发教程，…...

编程日记 2025/7/25 23:15:14

火花生态【算力通】公测，助力全球闲置算力训练AI模型

近日,在数字化浪潮迅猛推进的大背景下,人工智能模型训练对算力的需求呈井喷式增长,而全球范围内大量算力资源却处于闲置状态,如何高效整合这些闲置算力,成为推动行业发展的关键命题。在此关键时刻,火花生态旗下的核心产品【算力通】(ComputePower)于 2025 年 5 月 10 日正式开启…...

编程日记 2025/7/23 20:38:22

OpenMV IDE 的图像接收缓冲区原理

OpenMV IDE 的图像接收缓冲区原理与嵌入式图像处理系统的数据流控制密切相关。以下是其核心工作原理的分步解析： 一、图像缓冲区架构 OpenMV 的整个图像处理流程基于双缓冲（Double Buffering）机制，主要分为以下层级&#xff1…...

编程日记 2025/7/21 18:10:50

如何在LVGL之外的线程更新UI内容

前言作为一个刚开始学习LVGL和嵌入式开发的新手，学会绘制一个界面之后，遇到了一个问题：在LVGL线程之外的线程，更新UI内容时，会导致程序崩溃。 1、问题分析首先，需要了解LVGL的基本工作原理。LVGL&#…...

编程日记 2025/7/24 19:30:52

实景VR展厅制作流程与众趣科技实景VR展厅应用

实景VR展厅制作是一种利用虚拟现实技术将现实世界中的展览空间数字化并在线上重现的技术。这种技术通过三维重建和扫描等手段，将线下展馆的场景、展品和信息以三维形式搬到云端数字空间，从而实现更加直观、立体的展示效果。在制作过程中，首…...

编程日记 2025/7/22 13:56:10

Regmap子系统之六轴传感器驱动-编写icm20607.c驱动

（一）在驱动中要操作很多芯片相关的寄存器，所以需要先新建一个icm20607.h的头文件，用来定义相关寄存器值。 #ifndef ICM20607_H #define ICM20607_H /*************************************************************** 文件名 : i…...

编程日记 2025/7/22 2:06:57

计算机网络-HTTP与HTTPS

文章目录计算机网络网络模型网络OSITCP/IP 应用层常用协议HTTP报文HTTP状态码HTTP请求类型HTTP握手过程HTTP连接HTTP断点续传HTTPSHTTPS握手过程计算机网络网络模型为了解决多种设备能够通过网络相互通信，解决网络互联兼容性问题。网络模型是计算机网络中用于…...

编程日记 2025/7/25 1:25:00

Text2SQL在Spark NLP中的实现与应用：将自然语言问题转换为SQL查询的技术解析

概述 SQL 仍然是当前行业中最受欢迎的技能之一免责声明：Spark NLP 中的 Text2SQL 注释器在 v3.x（2021 年 3 月）中已被弃用，不再使用。如果您想测试该模块，请使用 Spark NLP for Healthcare 的早期版本。自新千年伊…...

编程日记 2025/7/23 16:14:23

Ubuntu20.04下使用dpkg方式安装WPS后，将WPS改为中文界面方法

Ubuntu20.04下使用dpkg方式安装WPS后，将WPS改为中文界面方法说明方法说明 Ubuntu20.04下使用dpkg方式安装WPS后，打开WPS后，发现界面是英文的，如有需要可以按照下面的方法将其改为中文界面。方法 cd /opt/kingsoft/wps-offic…...

编程日记 2025/7/10 20:00:45

OpenCV CUDA 模块中的矩阵算术运算-----在频域（复数频谱）中执行逐元素乘法并缩放的函数mulAndScaleSpectrums()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 mulAndScaleSpectrums()是OpenCV CUDA模块中用于在频域（复数频谱）中执行逐元素乘法并缩放的函数。这个函数主要用于在…...

编程日记 2025/7/26 7:04:29

批量剪辑 + 矩阵分发 + 数字人分身源码搭建全技术解析，支持OEM

在互联网内容生态蓬勃发展的当下，企业与创作者对内容生产与传播效率的要求日益增长。批量剪辑、矩阵分发和数字人分身技术的融合，成为提升内容创作与运营效能的关键方案。从源码层面实现三者的搭建与整合，需要深入理解各功能技术原理&#xf…...

编程日记 2025/7/25 13:44:48

Spring Boot 与 RabbitMQ 的深度集成实践（三）

高级特性实现消息持久化在实际的生产环境中，消息的可靠性是至关重要的。消息持久化是确保 RabbitMQ 在发生故障或重启后，消息不会丢失的关键机制。它涉及到消息、队列和交换机的持久化配置。首先，配置队列持久化。在创建队列时&#xf…...

编程日记 2025/7/21 19:06:13

1.编写shell脚本部署服务 restart.sh #!/bin/bash # # start the user program # echo "-------------------- start jk service --------------------" LOG_DIR"/home/joy/usr/app/ers-log" LOG_FILE"$LOG_DIR/log_$(date "%Y%m%d").txt&…...

编程日记 2025/7/24 23:50:01

中国城市间交通驾车距离矩阵(2024)

中国城市间交通驾车距离矩阵(2024) 1852 数据简介中国城市中心的交通驾车距离，该数据为通过审图号GS(2024)0650的中国城市地图得其城市中心距离，再通过高德地图api计算得出其交通驾车最短距离矩阵，单位为KM，方便大家研究使用。…...

编程日记 2025/7/22 2:11:24

物联网数据湖架构

物联网海量数据湖分析架构（推荐实践） ┌──────────────┐ │ IoT设备端 │ └──────┬───────┘│（MQTT/HTTP）▼ ┌──────────────┐ │ EMQX等 │ 可选（也可…...

编程日记 2025/7/25 4:32:57

Python将Excel单元格某一范围生成—截图（进阶版—带样式+批量+多级表头）

目录专栏导读1、库的介绍2、库的安装3、核心代码4、通用版——带样式5、进阶版（可筛选+自动截图）多级表头版总结专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题，解放您的双手 🏳️‍🌈 博客主页：请点击——> 一晌小贪欢的博客主页求关注 👍 该…...

编程日记 2025/7/17 14:00:14

使用Python将 Excel 中的图表、形状和其他元素导出为图片

目录为什么将 Excel 中的图表、形状和其他元素导出为图片？ 工具与设置 Python 将 Excel 图表导出为图片将图表导出为图片将图表工作表导出为图片 Python 将 Excel 中的形状和其他元素导出为图片微软 Excel 是一个功能强大的数据分析和可视化工具&#xff…...

编程日记 2025/7/23 16:47:07

从编程助手到AI工程师：Trae插件Builder模式实战Excel合并工具开发

Trae插件下载链接：https://www.trae.com.cn/plugin 引言：AI编程工具的新纪元在软件开发领域，AI辅助编程正在经历一场革命性的变革。Trae插件（原MarsCode编程助手）最新推出的Builder模式，标志着AI编程工具…...

编程日记 2025/7/24 17:46:19

AI大模型从0到1记录学习numpy pandas day25

第 3 章 Pandas 3.1 什么是Pandas Pandas 是一个开源的数据分析和数据处理库，它是基于 Python 编程语言的。 Pandas 提供了易于使用的数据结构和数据分析工具，特别适用于处理结构化数据，如表格型数据（类似于Excel表格）…...

编程日记 2025/7/25 0:37:13

【云实验】Excel文件转存到RDS数据库

实验名称：Excel文件转存到RDS数据库说明：把Excel的数据通过数据管理服务DMS（Data Management Service）导入到RDS MySQL数据库中。流程：创建一个RDS for MySQL的实例，再创建数据库和账号，通过D…...

编程日记 2025/7/22 8:31:25

用Python实现数据库数据自动化导出PDF报告：从MySQL到个性化文档的全流程实践

本文将介绍如何使用Python构建一个自动化工具，实现从MySQL数据库提取员工数据，并为每位员工生成包含定制化表格的PDF报告。通过该方案，可显著提升数据导出效率，避免手动操作误差，同时支持灵活的格式定制。需求&#…...

编程日记 2025/7/25 7:05:19

深入理解 ZAB：ZooKeeper 原子广播协议的工作原理

目录 ZAB 协议：ZooKeeper 如何做到高可用和强一致？🔒ZAB 协议的核心目标 🎯ZAB 协议的关键概念 💡ZAB 协议的运行阶段 🎬阶段一：Leader 选举 (Leader Election) 🗳️阶段二&#xff…...

编程日记 2025/7/24 9:28:25

Javascript本地存储的方式有哪些？区别及应用场景？（含Deep Seek讲解）

JavaScript本地存储方式的区别与适用场景 1. Cookie 特点: Cookie是一种较早的本地存储技术，主要通过HTTP协议在客户端和服务器之间传递数据。它的大小通常被限制为4KB以内，并且每次HTTP请求都会携带Cookie信息。缺点: 数据量有限制（最多4K…...

编程日记 2025/7/20 15:19:25

二元Logistic回归

二元Logistic回归在机器学习领域，二元Logistic回归是一种非常经典的分类模型，广泛用于解决具有两类标签的分类问题。Logistic回归通过逻辑函数（Sigmoid函数）将预测结果映射到概率值，并进行分类。一、Logistic回归 …...

编程日记 2025/7/19 19:08:55

Android framework 问题记录

一、休眠唤醒，很快熄屏 1.1 问题描述机器休眠唤醒后，没有按照约定的熄屏timeout 进行熄屏，很快就熄屏（约2s~3s左右） 1.2 原因分析： 抓取相关log，打印休眠背光相关调用栈 //具体打印调用栈…...

编程日记 2025/7/23 11:03:00

企业网站架构部署与优化 --web技术与nginx网站环境部署

一、Web 基础本节将介绍Web 基础知识,包括域名的概念、DNS 原理、静态网页和动态网页的相关知识。 1、域名和DNS 1.1、域名的概念网络是基于TCP/IP 协议进行通信和连接的，每一台主机都有一个唯一的标识(固定的IP 地址),用以区别在网络上成千上万个用户和计算机。…...

编程日记 2025/7/11 5:26:39

Scala与Spark：原理、实践与技术全景详解

Scala与Spark：原理、实践与技术全景详解一、引言在大数据与分布式计算领域，Apache Spark 已成为事实标准的计算引擎，而 Scala 作为其主要开发语言，也逐渐成为数据工程师和后端开发者的必备技能。本文将系统梳理 Scala 语言基础…...

编程日记 2025/7/25 9:46:06

【聚类】层次聚类

层次聚类文章目录层次聚类1. 算法介绍2. 公式及原理3. 伪代码 1. 算法介绍背景与目标层次聚类（Hierarchical Clustering）是一类无需事先指定簇数的聚类方法，通过构造一棵“树状图”（dendrogram）来呈现数据的多层次…...

编程日记 2025/7/25 1:43:53

Windows环境安装LibreOffice实现word转pdf

前言：最近在工作中遇到了一个需求要实现word转pdf，本来我在上一个公司使用aspose.words工具使用的得心应手，都已经把功能点实现了，两句代码轻轻松松，但是被告知不能用商业版的东西，公司要求只能用开源的&am…...

编程日记 2025/7/20 7:04:31

【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit (3)

1.问题描述： 通过CardRecognition识别身份证拍照拿到的照片地址，使用该方法获取不到图片文件，请问如何解决？ 解决方案： //卡证识别实现页，文件名为CardDemoPage，需被引入至入口页 import { …...

编程日记 2025/7/25 19:23:58

【聚类】K-means++

K-means 文章目录 K-means1. 算法介绍2. 公式及原理3. 伪代码 1. 算法介绍背景与目标 k-means 是 David Arthur 和 Sergei Vassilvitskii 于2007年提出的改进 k-means 初始化方法，其核心目标是： 在保证聚类质量的前提下，通过更合理地选择初始…...

编程日记 2025/7/23 14:59:20

Java实现PDF加水印功能：技术解析与实践指南

Java实现PDF加水印功能：技术解析与实践指南在当今数字化办公环境中，PDF文件因其跨平台兼容性和格式稳定性而被广泛应用。然而，为了保护文档的版权、标记文档状态（如“草稿”“机密”等）或增加文档的可追溯性&#xf…...

编程日记 2025/7/26 9:58:04

【C#】用 DevExpress 创建带“下拉子表”的参数表格视图

展示如何用 DevExpress 创建带“下拉子表”的参数表格视图。主表为参数行 ParamRow，子表为子项 ChildParam。一、创建模型类 public class ParamRow {public string Pn { get; set; }public string DisplayName { get; set; }public string Value { get; set; }…...

编程日记 2025/7/23 1:25:47

Go语言八股文之Mysql优化

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。非常期待和您一起在这个小…...

编程日记 2025/7/19 12:02:13

学习记录：DAY29

项目开发日志：技术实践与成长之路前言回顾这几天的状态，热情总是比我想象中更快被消耗完。比起茫然徘徊的小丑，我更希望自己是对着风车冲锋的疯子。今天继续深入项目的实际业务。状态好点的时候，再看自己EMO时写的东西&…...

编程日记 2025/7/9 4:54:48

LLaMA-Factory：了解webUI参数

Finetuning method参数 full（全量微调） 更新模型全部参数，完全适配新任务效果最好，但资源消耗最大适用于计算资源充足的场景存在过拟合的风险，需要大量数据支持 freeze（冻结微调） 固定底层参…...

编程日记 2025/7/21 19:05:57

【实战】GPT-SoVITS+内网穿透：3分钟搭建可公网访问的语音克隆系统

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学…...

编程日记 2025/7/26 1:30:46

HTML向四周扩散背景

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>扩散背景效果</title><style>body {…...

编程日记 2025/7/25 5:27:07

React 个人笔记 Hooks编程

作用配合函数式编程，保证在不产生类的时候完成一个整体的组件常用组件 useStateuseContextuseReduceruseEffectuseMemouseCallback 前三个值为自变量后三者为因变量前三者相当于其他编程函数的变量声明，而后三者相当于对变量进行了(if now ! pr…...

编程日记 2025/7/25 21:13:47

CSS- 4.6 radiu、shadow、animation动画

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。 HTML系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！ 点…...

编程日记 2025/7/22 15:11:08

ngx_http_scgi_module 技术指南

一、快速上手示例 http {# 定义 SCGI 参数（标准 CGI 环境变量）include /etc/nginx/scgi_params;server {listen 80;location /app/ {# 将请求转发到本地 9000 端口的 SCGI 服务器scgi_pass localhost:9000;# 只转发非空的 HTTPS 参数scgi…...

编程日记 2025/7/25 14:45:54