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

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

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