下载记录、钱包账单添加加载更多;监听键盘高度优化样式

This commit is contained in:
2025-10-01 08:10:01 +08:00
parent a06487ecdc
commit 1b05bd1da7
10 changed files with 140 additions and 63 deletions

View File

@@ -23,6 +23,7 @@
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
@@ -82,7 +83,7 @@
// 内容区域
.modal_content {
padding: 16px 20px;
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 20px;
@@ -90,19 +91,18 @@
.input_container {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 12px;
padding: 10px 16px;
box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
// 名字输入时的容器样式
&:has(.nickname_input) {
min-height: 40px;
padding: 10px 16px;
}
.text_input {
@@ -110,14 +110,12 @@
font-family: 'PingFang SC';
font-weight: 400;
font-size: 14px;
line-height: 1.71em;
color: #000000;
border: none;
background: transparent;
outline: none;
resize: none;
min-height: 120px;
height: 100px;
&::placeholder {
color: rgba(60, 60, 67, 0.3);
@@ -125,8 +123,6 @@
// 名字输入特殊样式
&.nickname_input {
min-height: 80px;
min-height: 20px;
height: 20px;
line-height: 20px;
padding: 0;
@@ -163,7 +159,7 @@
// 底部按钮
.modal_footer {
padding: 8px 10px;
padding: 8px 10px 20px;
display: flex;
gap: 8px;

View File

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { View, Text, Textarea, Input, Picker } from '@tarojs/components';
import Taro from '@tarojs/taro';
import './EditModal.scss';
import { useKeyboardHeight } from '@/store/keyboardStore'
interface EditModalProps {
visible: boolean;
@@ -29,6 +30,22 @@ const EditModal: React.FC<EditModalProps> = ({
const [value, setValue] = useState(initialValue);
const [isValid, setIsValid] = useState(true);
// 使用全局键盘状态
const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
// 使用全局键盘状态监听
useEffect(() => {
// 初始化全局键盘监听器
initializeKeyboardListener()
// 添加本地监听器
const removeListener = addListener((height, visible) => {
console.log('AiImportPopup 收到键盘变化:', height, visible)
})
return () => {
removeListener()
}
}, [initializeKeyboardListener, addListener])
useEffect(() => {
if (visible) {
setValue(initialValue);
@@ -38,7 +55,7 @@ const EditModal: React.FC<EditModalProps> = ({
const handle_input_change = (e: any) => {
const new_value = e.detail.value;
setValue(new_value);
// 验证输入
const valid = new_value.length >= 2 && new_value.length <= maxLength;
setIsValid(valid);
@@ -68,7 +85,7 @@ const EditModal: React.FC<EditModalProps> = ({
return (
<View className="edit_modal_overlay">
<View className="edit_modal_container">
<View className="edit_modal_container" style={{ paddingBottom: isKeyboardVisible ? (type === 'nickname' ? `${keyboardHeight + 60}px` : `${keyboardHeight }px`) : undefined }}>
{/* 标题栏 */}
<View className="modal_header">
<Text className="modal_title">{title}</Text>
@@ -85,33 +102,34 @@ const EditModal: React.FC<EditModalProps> = ({
{/* 文本输入区域 */}
<View className="input_container">
{type === 'nickname' ? (
<Input
className="text_input nickname_input"
value={value}
type="nickname"
placeholder={placeholder}
maxlength={maxLength}
onInput={handle_input_change}
adjustPosition={true}
confirmType="done"
autoFocus={true}
/>
) : (
<>
<Textarea
className="text_input"
{type === 'nickname' ? (
<Input
className="text_input nickname_input"
value={value}
type="nickname"
placeholder={placeholder}
maxlength={maxLength}
onInput={handle_input_change}
adjustPosition={false}
confirmType="done"
autoFocus={true}
/>
<View className="char_count">
<Text className="count_text">{value.length}/{maxLength}</Text>
</View>
</>
)}
) : (
<>
<Textarea
className="text_input"
value={value}
placeholder={placeholder}
maxlength={maxLength}
onInput={handle_input_change}
autoFocus={true}
adjustPosition={false}
/>
<View className="char_count">
<Text className="count_text">{value.length}/{maxLength}</Text>
</View>
</>
)}
</View>
{/* 验证提示 */}