fix(fe): 评论页键盘避让改用 bindkeyboardheightchange 移动固定输入条

列表完全不动(adjust-position=false + 页面 overflow:hidden),只有底部 fixed
输入条按键盘高度抬 bottom,聚焦期间不碰输入框其它属性,避免原生 textarea 抖失焦。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Blizzard
2026-08-03 16:10:53 +08:00
parent 7a55ee0f2e
commit 8d0269cbce
3 changed files with 23 additions and 15 deletions
+6 -6
View File
@@ -55,10 +55,10 @@
</scroll-view>
<!-- 底部输入条:普通流式排在 flex 列最底部(不 fixed)。页面整体 overflow:hidden 不能滚,
聚焦时原生 adjust-position 会把整屏均匀上移让输入条避开键盘 —— 不会像 fixed 那样把
页面过度上滚出大片空白,也不需要任何 JS 碰输入条(碰了就抖失焦。 -->
<view class="cm-bar">
<!-- 底部输入条:固定定位,靠 bindkeyboardheightchange 拿到键盘高度后把自己的 bottom 抬到
键盘上方。评论列表完全不动(adjust-position=false,页面不滚)。这是微信为「自定义输入条
跟随键盘」专门提供的事件,移动的是 bottom 值、不 reflow 输入框内部,所以不会抖失焦。 -->
<view class="cm-bar" style="bottom:{{kbHeight}}px">
<view wx:if="{{replyTo.name}}" class="cm-replying">
回复 {{replyTo.name}}
<view class="cm-cancel" catchtap="onCancelReply"><pt-icon name="close" size="{{24}}"></pt-icon></view>
@@ -72,9 +72,9 @@
<view class="cm-bar-row">
<textarea class="cm-ta" placeholder="{{replyTo.name ? '回复 @' + replyTo.name + '…' : '说点什么…'}}"
placeholder-class="placeholder" value="{{commentText}}" bindinput="onCommentInput"
focus="{{cmFocus}}" bindblur="onCommentBlur"
focus="{{cmFocus}}" bindblur="onCommentBlur" bindkeyboardheightchange="onKbChange"
maxlength="500" auto-height="{{true}}" show-confirm-bar="{{false}}"
adjust-position="{{true}}" cursor-spacing="16"></textarea>
adjust-position="{{false}}" cursor-spacing="16"></textarea>
<view class="cm-pic {{commentImages.length ? 'disabled' : ''}}" catchtap="onPickCommentImages"><pt-icon name="photo" size="{{44}}"></pt-icon></view>
<view class="cm-send {{commentText && !sendingComment ? 'on' : ''}}" catchtap="onSendComment">{{sendingComment ? '审核中…' : '发送'}}</view>
</view>