下载记录、钱包账单添加加载更多;监听键盘高度优化样式
This commit is contained in:
@@ -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;
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
{/* 验证提示 */}
|
||||
|
||||
Reference in New Issue
Block a user