具体直接看代码
wxml:
<view>
<button bindtap='showTalks'>查看评论</button>
</view>
<!-- 整个评论区 -->
<view class='talks-layer' animation='{
{talksAnimationData}}'>
<!-- 主要作用是点击后隐藏评论区 -->
<view class='layer-white-space' bindtap='hideTalks'>
</view>
<!-- 评论区 -->
<view class='talks' bindtouchstart='touchStart' bindtouchmove='touchMove'>
<!-- 评论头部 -->
<view class='talk-header'>
<view class='talk-count'>{
{talks.length}} 条评论</view>
<image src='../../../images/close.png' class='talk-close' bindtap='hideTalks'></image>
</view>
<!-- 评论体 -->
<scroll-view class='talk-body' scroll-y="true" bindscrolltolower="onScrollLoad">
<view class='talk-item' wx:for="{
{talks}}" wx:key="*this">
<view class='talk-item-left'>
<image class='talk-item-face' src='{
{item.avatarUrl}}'></image>
</view>
<view class='talk-item-right'>
<view class='right-left'>
<text class='talk-item-nickname'>{
{item.nickName}}</text>
<text class='talk-item-time'>{
{item.talkTime}}</text>
</view>
<text class='talk-item-content'>{
{item.content}}</text>
</view>
</view>
</scroll-view>
<!-- 评论底部 -->
<view class="cf-bg" catchtap="cemojiCfBg" style="display:{
{cfBg ? 'block' : 'none'}}"></view>
<view class=" {
{isShow ?'footer_boxmovein' : 'talk-footer'}}">
<view class='footer_box'>
<view class="emoji iconfont icon-emoji" catchtap="emojiShowHide"></view>
<input class='talk-input' type='text' value='{
{inputValue}}' bindblur="bindInputBlur" placeholder='有爱评论,说点儿好听的~'></input>
<button class='fabu-input' bindtap='faBu'>发布</button>
</view>
<view wx:if='{
{isShow}}' class="emoji-box {
{isShow ? 'emoji-move-in' : 'emoji-move-out'}} {
{isLoad ? 'no-emoji-move' : ''}}">
<scroll-view scroll-y="true" bindscroll="emojiScroll" style="height:200px">
<block wx:for="{
{emojis}}" wx:for-item="e" wx:key="">
<view class="emoji-cell">
<image class="touch-active" bindtap="emojiChoose" src="