diff --git a/pets-fe/pages/comments/comments.js b/pets-fe/pages/comments/comments.js index a0477ef..0bb237f 100644 --- a/pets-fe/pages/comments/comments.js +++ b/pets-fe/pages/comments/comments.js @@ -26,6 +26,7 @@ Page({ replyTo: {}, cmFocus: false, sendingComment: false, + kbHeight: 0, }, onLoad(query) { @@ -77,11 +78,15 @@ Page({ this.setData({ replyTo: {} }); }, - // 关键:聚焦期间 JS 绝不 setData 碰输入条(连 cmFocus:false 都不设), - // 否则原生 textarea 会被抖失焦、键盘弹一下就自己收。cmFocus 只在失焦时复位, - // 这样下次点回复 false→true 还能重新拉起键盘。键盘避让全交给原生 adjust-position。 + // 键盘高度变化:微信为「自定义输入条跟随键盘」提供的事件。只改输入条的 bottom(inline), + // 评论列表完全不动。注意:聚焦期间除了这个 bottom,绝不 setData 碰输入框本身 + // (不设 cmFocus:false、不改它的布局),否则原生 textarea 会被抖失焦、键盘弹一下就收。 + onKbChange(e) { + this.setData({ kbHeight: (e.detail && e.detail.height) || 0 }); + }, onCommentBlur() { - this.setData({ cmFocus: false }); + // 失焦:收起键盘时把输入条放回底部;cmFocus 复位好让下次回复能重新拉键盘 + this.setData({ cmFocus: false, kbHeight: 0 }); }, // 配图:评论只允许 1 张 diff --git a/pets-fe/pages/comments/comments.wxml b/pets-fe/pages/comments/comments.wxml index c682909..7473224 100644 --- a/pets-fe/pages/comments/comments.wxml +++ b/pets-fe/pages/comments/comments.wxml @@ -55,10 +55,10 @@ - - + + 回复 {{replyTo.name}} @@ -72,9 +72,9 @@ + adjust-position="{{false}}" cursor-spacing="16"> {{sendingComment ? '审核中…' : '发送'}} diff --git a/pets-fe/pages/comments/comments.wxss b/pets-fe/pages/comments/comments.wxss index 65741f8..559aa42 100644 --- a/pets-fe/pages/comments/comments.wxss +++ b/pets-fe/pages/comments/comments.wxss @@ -1,8 +1,9 @@ -/* flex 列 + 整页 overflow:hidden:页面本身不滚,列表在内层 scroll-view 里滚。 - 这样聚焦时 adjust-position 只能均匀上移整屏,不会过度上滚露出大空白 */ +/* flex 列 + 整页 overflow:hidden:页面本身不滚(adjust-position=false 时列表纹丝不动), + 列表在内层 scroll-view 里滚,底部输入条 fixed 覆在最下面 */ page{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--bg)} -.cm-scroll{flex:1;min-height:0;padding:0 var(--sp-5)} +/* 底部留白 = 输入条高度,最后几条评论不被固定输入条盖住 */ +.cm-scroll{flex:1;min-height:0;padding:0 var(--sp-5) 200rpx} .cm-count-head{ padding:var(--sp-3) 0;font-size:var(--fs-md);font-weight:var(--fw-b); color:var(--text);border-bottom:1rpx solid var(--line); @@ -44,10 +45,12 @@ page{display:flex;flex-direction:column;height:100vh;overflow:hidden;background: color:var(--primary-ink);background:var(--primary-soft);padding:2rpx var(--sp-1);border-radius:var(--r-full); } -/* 底部输入条:flex 列里最后一行,不 fixed。整屏靠 adjust-position 均匀上移避让键盘 */ +/* 底部输入条:固定在底部,键盘弹起时 inline 的 bottom 会被抬到键盘上方(列表不动) */ .cm-bar{ - flex:none;background:#fff;border-top:1rpx solid var(--line); + position:fixed;left:0;right:0;bottom:0;z-index:50; + background:#fff;border-top:1rpx solid var(--line); padding:var(--sp-3) var(--sp-5) calc(16rpx + env(safe-area-inset-bottom)); + transition:bottom .15s ease; } .cm-replying{ display:inline-flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2);