Full stack items | small bookcase | applet end - comment function to achieve

Renderings

Here Insert Picture Description

Post a comment

Comment entry in the book details page, click on the Write comment Jump to comment after page button.

wxmlThe layout is relatively simple, there is no comment function to add pictures, and no children comment function, so the pseudo-code is relatively simple:

<view class="comment-container">
    
    <!-- book name -->
    <view class="book-name">
        <text>{{bookInfo.name}}</text>
    </view>

    <!-- comment area -->
    <view class="comment-area bg-white">
        <textarea placeholder="关于这本书的看法..." maxlength="140" value="{{comment}}" bindinput="inputComment"></textarea>
    </view>

    <!-- bottom button -->
    <form report-submit bindsubmit="submitComment">
        <view class="fixed-bottom block-full-width flex-container bg-white">
            <button class="full-button" type="primary" form-type="submit"> 提交评论 </button>
        </view>
    </form>

</view>

In order to achieve this function, to beautify the page being done is not good enough, so wxssdo not call simple, pseudo-code is as follows:

.comment-container {
    display: flex;
    flex-direction: column;
    padding: 20rpx 0;
}

.book-name {
    padding: 10rpx 30rpx;
}

.comment-area {
    margin-top: 20rpx;
    padding: 20rpx 30rpx;
}

When comment, we need to enter the user's content is correct by the judge, such as empty sentence, illegal characters, character length judgment, so here encapsulates a method validation:

// 检查用户是否输入了非法字符
  checkIllegal: function(input) {
    let patern = /[`#^<>:"?{}\/;'[\]]/im;
    let _result = patern.test(input);
    return _result;
  },

We check the data on the data can be submitted to the server by the following main operations are as follows:

Save the data as an object
Call to write a review of the interface, the object will be passed to the server
After a successful review, Close Comments page, return to details page refresh data

The first two steps are better achieve the third step how to achieve it?

Here the use of the page cache implementation way of passing mark when the cache is saved off the page after a successful review, and then in the book detail page onShowjudgment cache flag method.

There are signs cache data is loaded comments, and then clear the cache. No comments list of interfaces that data is not cached request.

comment list

Comments list is actually very simple, is to write a itemlayout, then forcycle to render list layout can be.

wxmlLayout is as follows:

<view class="comment-area" wx:else>
      <block wx:if="{{commentList.length > 0}}">
        <view class="comment-item" wx:for="{{commentList}}" wx:key="index">
          <view class="avatar-container">
            <image mode="scaleToFill" src="{{item.uavatar}}" class="user-avatar"></image>
          </view>

          <view class="comment-content">
            <text class="user-name">{{item.uname}}</text>
            <text class="user-comment">{{item.ucontent}}</text>
            <text class="comment-time">{{item.created_at}}</text>
          </view>
        </view>
      </block>

      <block wx:else>
        <view class="comment-placeholder">来当第一个评论的人吧～</view>
      </block>
    </view>

The data is passed to the data wxmlcan be.

// 设置进度条隐藏或者加载
  _commentSetTimeOut(list, isLoading) {
    let that = this
    // 关闭进度条
    setTimeout(function() {
      that.setData({
        commentList: list,
        commentLoading: isLoading
      });
    }, 500);
  },

Above is this introduction.

Scan code number of public attention, pull up to the light.

Here Insert Picture Description