達成するためのコメント機能 - アプレット終わり|フルスタック項目|小さな本棚

レンダリング

ここに画像を挿入説明

コメントを投稿

本の中でコメントエントリはをクリックして、ページの詳細を書くコメントページボタンの後のコメントにジャンプします。

wxmlレイアウトは、写真を追加するコメント機能がない、比較的単純ではない、と子コメント機能なので、擬似コードは比較的簡単です：

<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>

行われているページを美化するために、この機能を実現するためには良い十分ではありませんので、wxss以下のように呼び出していないシンプルな操作を行い、擬似コードは次のようになります。

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

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

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

コメント、私たちはユーザーのコンテンツを入力する必要がありますが、そのような空の文、不正な文字、文字長の判断として、裁判官によって正しい場合、ので、ここでは、メソッドのバリデーションをカプセル化：

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

データは、以下の主要な操作でサーバーに送信することが可能に私たちは、データをチェックすることとして、次のとおりです。

オブジェクトとしてデータを保存
インターフェイスのレビューを書くに呼び出して、オブジェクトがサーバーに渡されます
詳細ページリフレッシュデータに成功したレビュー、閉じるコメントページ、復帰した後、

最初の2つのステップは、より良いどのようにそれを達成するための第三段階を達成していますか？

ここではキャッシュが成功したレビューの後にページをオフに保存されたときにマークを渡すのページキャッシュの実装方法を使用して、本の詳細ページでonShow判定キャッシュフラグ方法。

そこキャッシュデータがコメントをロードされている兆候があり、その後、キャッシュをクリア。いいえデータは、要求をキャッシュされていないことをインターフェイスのリストをコメントしています。

コメント一覧

コメントリストは実際には非常に簡単です、書くことでitem、レイアウト、そしてforリストのレイアウトが可能レンダリングするサイクルを。

wxml次のようなレイアウトは以下のとおりです。

<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>

データは、データに渡されるwxmlことができます。

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

上記は、この紹介です。

世間の注目のスキャンコード番号が、光にプルアップ。

ここに画像を挿入説明