Blizzard
8d0269cbce
列表完全不动（adjust-position=false + 页面 overflow:hidden），只有底部 fixed 输入条按键盘高度抬 bottom，聚焦期间不碰输入框其它属性，避免原生 textarea 抖失焦。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
83 lines
4.5 KiB
Plaintext
83 lines
4.5 KiB
Plaintext
<nav-bar title="评论" show-back="{{true}}"></nav-bar>
|
|
|
|
<scroll-view class="cm-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
|
|
<view class="cm-count-head">共 {{total}} 条评论</view>
|
|
|
|
<view wx:for="{{comments}}" wx:key="id" class="cm"
|
|
bindtap="onReplyTo" data-id="{{item.id}}" data-name="{{item.author_name}}">
|
|
<view class="cm-av">{{item.initial}}</view>
|
|
<view class="cm-body">
|
|
<view class="cm-name">{{item.author_name}}<text wx:if="{{item.is_self}}" class="mine-tag">我</text></view>
|
|
<view class="cm-text">{{item.content}}</view>
|
|
<view wx:if="{{item.imgs.length}}" class="cm-imgs">
|
|
<image wx:for="{{item.imgs}}" wx:for-item="u" wx:key="*this" class="cm-img"
|
|
src="{{u}}" mode="aspectFill" catchtap="onPreviewCommentImage"
|
|
data-urls="{{item.imgs}}" data-cur="{{u}}"></image>
|
|
</view>
|
|
<view class="cm-meta">
|
|
<text>{{item.timeText}}</text>
|
|
<text class="cm-reply-btn">回复</text>
|
|
<text wx:if="{{item.is_self}}" class="cm-del" catchtap="onDeleteComment"
|
|
data-id="{{item.id}}" data-self="{{true}}">删除</text>
|
|
</view>
|
|
|
|
<view wx:if="{{item.replies.length}}" class="cm-replies">
|
|
<view wx:for="{{item.replies}}" wx:for-item="r" wx:key="id" class="cm-reply"
|
|
catchtap="onReplyTo" data-id="{{r.id}}" data-name="{{r.author_name}}">
|
|
<view class="cm-av cm-av-sm">{{r.initial}}</view>
|
|
<view class="cm-body">
|
|
<view class="cm-name">
|
|
{{r.author_name}}<text wx:if="{{r.is_self}}" class="mine-tag">我</text>
|
|
<text wx:if="{{r.reply_to_name}}" class="cm-at"> 回复 {{r.reply_to_name}}</text>
|
|
</view>
|
|
<view class="cm-text">{{r.content}}</view>
|
|
<view class="cm-meta">
|
|
<text>{{r.timeText}}</text>
|
|
<text class="cm-reply-btn">回复</text>
|
|
<text wx:if="{{r.is_self}}" class="cm-del" catchtap="onDeleteComment"
|
|
data-id="{{r.id}}" data-self="{{true}}">删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view wx:if="{{item.reply_n > item.replies.length}}" class="cm-more"
|
|
catchtap="onExpandReplies" data-id="{{item.id}}" data-index="{{index}}">
|
|
— 展开全部 {{item.reply_n}} 条回复
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view wx:if="{{!comments.length}}" class="cmp-empty">
|
|
<view class="cmp-empty-ic"><pt-icon name="comment" size="{{72}}"></pt-icon></view>
|
|
<view class="cmp-empty-t">还没有评论</view>
|
|
<view class="cmp-empty-p">来抢个沙发，说点什么吧～</view>
|
|
</view>
|
|
|
|
</scroll-view>
|
|
|
|
<!-- 底部输入条：固定定位，靠 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>
|
|
</view>
|
|
<view wx:if="{{commentImages.length}}" class="img-picker">
|
|
<view wx:for="{{commentImages}}" wx:key="id" class="img-thumb">
|
|
<image src="{{item.url}}" mode="aspectFill"></image>
|
|
<view class="img-del" catchtap="onRemoveCommentImage" data-index="{{index}}"><pt-icon name="close" size="{{24}}"></pt-icon></view>
|
|
</view>
|
|
</view>
|
|
<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" bindkeyboardheightchange="onKbChange"
|
|
maxlength="500" auto-height="{{true}}" show-confirm-bar="{{false}}"
|
|
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>
|
|
<view class="cm-tip">评论通过安全审核后才会公开显示，配图最多 1 张</view>
|
|
</view>
|