bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 键盘顶起输入框

Browse Source
This commit is contained in:
刘杰
2025-10-12 10:30:23 +08:00
parent 5bb1fe7a56
commit 35dfc7ffc8
2 changed files with 36 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Comments/index.tsx
View File

@@ -60,6 +60,8 @@ const CommentInput = forwardRef<CommentInputRef, CommentInputProps>(function (
const inputDomRef = useRef(null); const inputDomRef = useRef(null);
const [adjust, setAdjust] = useState(false);
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
show: (_params: CommentInputReplyParamsType | undefined) => { show: (_params: CommentInputReplyParamsType | undefined) => {
setVisible(true); setVisible(true);
@@ -82,6 +84,7 @@ const CommentInput = forwardRef<CommentInputRef, CommentInputProps>(function (
function onClose() { function onClose() {
setVisible(false); setVisible(false);
setValue(""); setValue("");
setAdjust(false);
inputDomRef.current && inputDomRef.current?.blur(); inputDomRef.current && inputDomRef.current?.blur();
} }
return ( return (
@@ -91,20 +94,30 @@ const CommentInput = forwardRef<CommentInputRef, CommentInputProps>(function (
hideFooter hideFooter
zIndex={1002} zIndex={1002}
onClose={onClose} onClose={onClose}
style={{ height: "60px!important", minHeight: "unset" }} style={{
height: "60px!important",
minHeight: "unset",
}}
enableDragToClose={false} enableDragToClose={false}
> >
<View className={styles.inputContainer}> <View className={styles.inputContainer}>
<View className={styles.inputWrapper}> <View className={styles.inputWrapper}>
<Input <Input
adjustPosition={adjust}
ref={inputDomRef} ref={inputDomRef}
className={styles.input} className={styles.input}
value={value} value={value}
onInput={(e) => setValue(e.detail.value)} onInput={(e) => setValue(e.detail.value)}
cursorSpacing={20}
placeholder={ placeholder={
params?.reply_to_user_id ? `回复 @${params.nickname}` : "写评论" params?.reply_to_user_id ? `回复 @${params.nickname}` : "写评论"
} }
focus focus
onFocus={() => {
setTimeout(() => {
setAdjust(true);
}, 10);
}}
maxlength={100} maxlength={100}
/> />
</View> </View>

85
src/game_pages/detail/index.scss
View File

@@ -198,9 +198,7 @@
&-text { &-text {
overflow: hidden; overflow: hidden;
color: #fff; color: #fff;
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
text-overflow: ellipsis; text-overflow: ellipsis;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 22px; font-size: 22px;
@@ -278,9 +276,7 @@
.date { .date {
color: #fff; color: #fff;
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
@@ -290,9 +286,7 @@
.venue-time { .venue-time {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
@@ -318,9 +312,7 @@
align-items: center; align-items: center;
gap: 12px; gap: 12px;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
@@ -373,9 +365,7 @@
gap: 4px; gap: 4px;
color: #fff; color: #fff;
text-align: center; text-align: center;
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
@@ -391,9 +381,7 @@
&-address { &-address {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
text-align: center; text-align: center;
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
@@ -467,9 +455,7 @@
&-tag { &-tag {
overflow: hidden; overflow: hidden;
color: #fff; color: #fff;
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
text-overflow: ellipsis; text-overflow: ellipsis;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 15px; font-size: 15px;
@@ -549,9 +535,7 @@
color: #fff; color: #fff;
height: 24px; height: 24px;
padding-bottom: 6px; padding-bottom: 6px;
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
text-overflow: ellipsis; text-overflow: ellipsis;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 16px; font-size: 16px;
@@ -576,9 +560,7 @@
&-title { &-title {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
@@ -588,9 +570,7 @@
&-desc { &-desc {
color: #fff; color: #fff;
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 15px; font-size: 15px;
font-style: normal; font-style: normal;
@@ -611,9 +591,7 @@
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
color: #fff; color: #fff;
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
text-overflow: ellipsis; text-overflow: ellipsis;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 16px; font-size: 16px;
@@ -653,9 +631,7 @@
&-text { &-text {
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
@@ -700,9 +676,7 @@
width: 100%; width: 100%;
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85);
text-align: center; text-align: center;
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 13px; font-size: 13px;
font-style: normal; font-style: normal;
@@ -716,9 +690,7 @@
&-level { &-level {
color: rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.45);
text-align: center; text-align: center;
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
@@ -729,9 +701,7 @@
&-role { &-role {
color: #fff; color: #fff;
text-align: center; text-align: center;
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
@@ -752,9 +722,7 @@
padding-bottom: 7px; padding-bottom: 7px;
height: 24px; height: 24px;
color: #fff; color: #fff;
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
text-overflow: ellipsis; text-overflow: ellipsis;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 16px; font-size: 16px;
@@ -779,9 +747,7 @@
&-tag { &-tag {
overflow: hidden; overflow: hidden;
color: #fff; color: #fff;
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
text-overflow: ellipsis; text-overflow: ellipsis;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 15px; font-size: 15px;
@@ -794,9 +760,7 @@
&-text { &-text {
overflow: hidden; overflow: hidden;
color: rgba(255, 255, 255, 0.65); color: rgba(255, 255, 255, 0.65);
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 15px; font-size: 15px;
font-style: normal; font-style: normal;
@@ -814,9 +778,7 @@
padding-bottom: 6px; padding-bottom: 6px;
height: 24px; height: 24px;
color: #fff; color: #fff;
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
text-overflow: ellipsis; text-overflow: ellipsis;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 16px; font-size: 16px;
@@ -996,9 +958,7 @@
gap: 2px; gap: 2px;
overflow: hidden; overflow: hidden;
color: rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.45);
font-feature-settings: font-feature-settings: "liga" off, "clig" off;
"liga" off,
"clig" off;
text-overflow: ellipsis; text-overflow: ellipsis;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 12px; font-size: 12px;
@@ -1138,8 +1098,8 @@
overflow: hidden; overflow: hidden;
&.disabled { &.disabled {
background-color: #B4B4B4; background-color: #b4b4b4;
color: rgba(60, 60, 67, 0.60); color: rgba(60, 60, 67, 0.6);
pointer-events: none; pointer-events: none;
} }
@@ -1176,4 +1136,3 @@
} }
} }
} }