微信小程序入门与实战

评论列表wxml组件页面

属性	解析
aspectFill	剪裁图片
hidden	组件的显示和影藏
input	数据输入组件
value	input输入框的初始内容
disabled	true禁用input组件
bindinput	类似android的TextWatch
bindconfirm	软键盘完成按钮事件
placeholder	输入框为空时的占位符

<view class="comment-detail-box">
<!--评论界面-->
  <view class="comment-main-box">
    <view class="comment-title">评论………（共{{comments.length}}条）</view>
    <block wx:for="{{comments}}" wx:for-item="item" wx:for-index="idx">
      <view class="comment-item">
        <view class="comment-item-header">
          <view class="left-img">
            <image src="{{item.avatar}}"></image>
          </view>
          <view class="right-user">
            <text class="user-name">{{item.username}}</text>
          </view>
        </view>
        <view class="comment-body">
          <view class="comment-txt" wx:if="{{item.content.txt}}">
            <text>{{item.content.txt}}</text>
          </view>
          <view class="comment-voice" wx:if="{{item.content.audio && item.content.audio.url}}">
            <view data-url="{{item.content.audio.url}}" class="comment-voice-item" catchtap="playAudio">
              <image src="/images/icon/wx_app_voice.png" class="voice-play"></image>
              <text>{{item.content.audio.timeLen}}''</text>
            </view>
          </view>
          <view class="comment-img" wx:if="{{item.content.img.length!=0}}">
            <block wx:for="{{item.content.img}}" wx:for-item="img" wx:for-index="imgIdx">
              <image src="{{img}}" mode="aspectFill" catchtap="previewImg" data-comment-idx="{{idx}}" data-img-idx="{{imgIdx}}"></image>
            </block>
          </view>
        </view>
        <view class="comment-time">{{item.create_time}}</view>
      </view>
    </block>
  </view>
  <!--消息发送界面 -->
  <view class="input-box">
    <view class="send-msg-box">
      <view hidden="{{useKeyboardFlag}}" class="input-item">
        <image src="/images/icon/wx_app_keyboard.png" class="comment-icon keyboard-icon" catchtap="switchInputType"></image>
        <input class="input speak-input {{recodingClass}}" value="按住 说话" disabled="disabled" catchtouchstart="recordStart" catchtouchend="recordEnd" />
      </view>
      <view hidden="{{!useKeyboardFlag}}" class="input-item">
        <image class="comment-icon speak-icon" src="/images/icon/wx_app_speak.png" catchtap="switchInputType"></image>
        <input class="input keyboard-input" value="{{keyboardInputValue}}" bindconfirm="submitComment" bindinput="bindCommentInput" placeholder="说点什么吧……" />
      </view>
      <image class="comment-icon add-icon" src="/images/icon/wx_app_add.png" catchtap="sendMoreMsg"></image>
      <view class="submit-btn" catchtap="submitComment">发送</view>
    </view>
    <!--显示底部照片和拍照页面-->
    <view class="send-more-box" hidden="{{!sendMoreMsgFlag}}">

      <view class="send-more-btns-main">
        <view class="more-btn-item" catchtap="chooseImage" data-category="album">
          <view class="more-btn-main">
            <image src="/images/icon/wx_app_upload_image.png"></image>
          </view>
          <text>照片</text>
        </view>
        <view class="more-btn-item" catchtap="chooseImage" data-category="camera">
          <view class="more-btn-main">
            <image src="/images/icon/wx_app_camera.png"></image>
          </view>
          <text>拍照</text>
        </view>
      </view>
    </view>
  </view>
</view>

编写评论的wxss

属性	解析
width: auto	绝对布局
absolute	绝对布局
absolute	绝对布局
absolute	绝对布局
absolute	绝对布局
absolute	绝对布局

.comment-detail-box {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow-y: hidden;
}

.comment-main-box {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 100rpx;
  right: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling:touch;
}

.comment-item {
  margin: 20rpx 0 20rpx 24rpx;
  padding: 24rpx 24rpx 24rpx 0;
  border-bottom: 1rpx solid #f2e7e1;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-title {
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  color: #212121;
  border-bottom: 1px solid #ccc;
  margin-left: 24rpx;
  padding: 8rpx 0;
  font-family: Microsoft YaHei;
}

.comment-item-header {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.comment-item-header .left-img image {
  height: 80rpx;
  width: 80rpx;
}

.comment-item-header .right-user {
  margin-left: 30rpx;
  line-height: 80rpx;
}

.comment-item-header .right-user text {
  font-size: 26rpx;
  color: #212121;
}

.comment-body {
  font-size: 26rpx;
  line-height: 26rpx;
  color: #666;
  padding: 10rpx 0;
}

.comment-txt text {
  line-height: 50rpx;
}

.comment-img {
  margin: 10rpx 0;
}

.comment-img image {
  max-width: 32%;
  margin-right: 10rpx;
  height: 220rpx;
  width: 220rpx;
}

.comment-voice-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 200rpx;
  height: 64rpx;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 6rpx;
}

.comment-voice-item .voice-play {
  height: 64rpx;
  width: 64rpx;
}


.comment-voice-item text {
  margin-left: 60rpx;
  color: #212121;
  font-size: 22rpx;
}

.comment-time {
  margin-top: 10rpx;
  color: #ccc;
  font-size: 24rpx;
}


/*******************评论框**********************/
.input-box{
    position: absolute;
    bottom: 0;
    left:0;
    right: 0;
    background-color: #EAE8E8;
    border-top:1rpx solid #D5D5D5;
    min-height: 100rpx;
    z-index: 1000;
}
.input-box .send-msg-box{
    width: 100%;
    height: 100%;
    display: flex;
    padding: 20rpx 0;
}
.input-box .send-more-box{
    margin: 20rpx 35rpx 35rpx 35rpx;
}
.input-box .input-item{
    margin:0 5rpx;
    flex:1;
    width: 0%;
    position: relative;
}
.input-box .input-item .comment-icon{
    position: absolute;
    left:5rpx;
    top:6rpx;
}

.input-box .input-item .input{
    border: 1rpx solid #D5D5D5;
    background-color: #fff;
    border-radius: 3px;
    line-height: 65rpx;
    margin:5rpx 0 5rpx 75rpx ;
    font-size: 24rpx;
    color: #838383;
    padding: 0 2%;
}
.input-box .input-item .keyboard-input{
    width: auto;
    max-height: 500rpx;
    height: 65rpx;
    word-break:break-all;
    overflow:auto;
}
.input-box .input-item .speak-input{
    text-align: center;
    color: #212121;
    height: 65rpx;
}

.input-box .input-item .recoding{
    background-color: #ccc;
}

.input-box .input-item .comment-icon.speak-icon{
    height: 62rpx;
    width: 62rpx;
}
.input-box .input-item .comment-icon.keyboard-icon{
    height: 60rpx;
    width: 60rpx;
    left:6rpx;
}
.input-box .add-icon{
    margin:0 5rpx;
    height: 65rpx;
    width: 65rpx;
    transform: scale(0.9);
    margin-top: 2px;
}
.input-box .submit-btn{
    font-size: 24rpx;
    margin-top: 5rpx;
    margin-right: 8rpx;
    line-height: 60rpx;
    width: 120rpx;
    height: 60rpx;
    background-color: #4A6141;
    border-radius:5rpx;
    color: #fff;
    text-align: center;
    font-family:Microsoft Yahei;
}


.send-more-box .more-btn-item{
    display: inline-block;
    width: 110rpx;
    height: 145rpx;
    margin-right: 35rpx;
    text-align: center;
}

.more-btn-main{
    width: 100%;
    height:60rpx;
    text-align: center;
    border:1px solid #D5D5D5;
    border-radius: 10rpx;
    background-color: #fbfbfc;
    margin: 0 auto;
    padding:25rpx 0
}
.more-btn-main image{
    width: 60rpx;
    height: 60rpx;
}
.send-more-box .more-btn-item .btn-txt{
    color: #888888;
    font-size: 24rpx;
    margin:10rpx 0;
}