<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="http://soupu.oss-cn-shanghai.aliyuncs.com/emoji/{{e.emoji}}.png" data-emoji="{{e.char}}" data-oxf="{{e.emoji}}"></image> </view> </block> </scroll-view> </view> </view> </view> </view>

page { height: 100%; overflow: hidden; }   /* 框架 */.talks-layer { position: absolute; bottom: -100%; height: 0; width: 100%; overflow: hidden; /* background-color: blue; */ } .layer-white-space { height: 100%; width: 100%; background-color: #ccc; opacity: 0.5; /* background-color: green; */ }  .talks { position: absolute; height: 900rpx; width: 100%; bottom: 0rpx; background-color: #2f2d2e; border-top-left-radius: 3%; border-top-right-radius: 3%;/* background-color: red; */ }  .talk-header { width: 100%; height: 70rpx; padding-top: 30rpx; text-align: center; }  .talk-body { height: 700rpx; }  .talk-footer { position: absolute; bottom: 0rpx; width: 100%; height: 100rpx; background-color: #151515; display: flex; justify-content: space-between; align-items: center; padding: 0 30rpx; box-sizing: border-box; } .footer_boxmovein{position: absolute; bottom: 400rpx; width: 100%; height: 100rpx; z-index:1000; background-color: #151515; display: flex;justify-content: space-between; align-items: center; padding: 0 30rpx; box-sizing: border-box; transition:all 0.6s; } .footer_box { display: flex;justify-content: space-between;align-items: center;width: 100%; }   /* 頂部元素 */ .talk-count { font-size: 26rpx; height: 40rpx; color: #6b696a;} .talk-close {position: absolute;top: 30rpx; right: 40rpx; width: 40rpx; height: 40rpx; }  /* 中部元素 */ .talk-item { display: flex; flex-direction: row; align-items: flex-start; width: 100%; color: white; }  .talk-item-left { display: flex; flex-direction: row; margin: 20rpx 30rpx; }  .talk-item-face { width: 80rpx; height: 80rpx;border-radius: 50%; }  .talk-item-right { width: 100%; border-bottom: solid 1rpx #6a6869; margin-right: 30rpx; /* margin-bottom: 30rpx; */ padding-bottom: 20rpx; }  .right-left { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; }  .talk-item-nickname { font-size: 28rpx; color: #aaa8a9; }  .talk-item-time { font-size: 24rpx; color: #6a6869; }  .talk-item-content {display: block; font-size: 30rpx;margin-right: 30rpx; width: 92%; white-space: pre-line; word-break: break-all; word-wrap: break-word；; }   /* 底部元素 */ .talk-input { width: 100%; font-size: 30rpx; padding: 20rpx 0; padding-left: 30rpx; /* box-sizing: border-box; */ color: white; border-top-left-radius: 5%;border-top-right-radius: 5%; } .fabu-input { background: red; font-size: 26rpx; color: #fff;width: 127rpx; height: 60rpx; line-height: 60rpx;text-align: center; border-radius: 30rpx; padding: 0; }  .emoji {background-color: #fff;width: 30px; height: 30px; text-align: center; padding-top: 2px;box-sizing: border-box; font-size: 20px; } .emoji-box {position: absolute; bottom:-390rpx; left:0rpx; height: 200px; padding: 5px 16rpx; box-sizing: border-box; background:#000; }  .emoji-cell { width: 9.09%; height: 33px; display: inline-block; } .emoji-cell image { width: 23px;height: 23px; padding: 5px;border-radius: 3px; }  .emoji-move-in { -webkit-animation: emoji-move-in 0.3s forwards; animation: emoji-move-in 0.3s forwards; } .emoji-move-out { -webkit-animation: emoji-move-out 0.3s forwards; animation: emoji-move-out 0.3s forwards; }  .no-emoji-move { -webkit-animation: none; animation: none;}  @-webkit-keyframes emoji-move-in { 0% {margin-bottom: -200px; } 100% {margin-bottom: 0; } }  @keyframes emoji-move-in { 0% { margin-bottom: -200px; }  100% { margin-bottom: 0; } }  @-webkit-keyframes emoji-move-out { 0% { margin-bottom: 0; } 100% { margin-bottom: -200px; } } @keyframes emoji-move-out { 0% { margin-bottom: 0; }  100% { margin-bottom: -200px; } } @-webkit-keyframes pd-left-move { 0% { padding-left: 5px; } 100% { padding-left: 15px; } }  @keyframes pd-left-move { 0% { padding-left: 5px; }  100% { padding-left: 15px;} } .cf-bg {position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: transparent; z-index: 99; }

Page({ data: { talks: [], touchStart: 0, inputValue: '', inputBiaoqing: '', faces: ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535727304160&di=0cc9d01a4ae2deca5634c3136d5c01f6&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fitem%2F201406%2F12%2F20140612202753_u4nG5.jpeg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535727304159&di=da2c1c4e868ee95f3cd65ffc6e24a456&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201505%2F01%2F20150501083603_yuTQc.jpeg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535727304156&di=7d46a1482a8e798a70d8d52320285b02&imgtype=0&src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F7b%2Ff9%2F01%2F7bf901db9091dff00a20d474c83afc45.jpg'], names: ['貝貝', '晶晶', '歡歡', '妮妮'], isShow: false, //控制emoji表情是否顯示  isLoad: true, //解決初試加載時emoji動畫執行一次 cfBg: false, emojiChar: "?-