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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user