WeChatミニプログラムがいいねサービスを実装

<!-- 
 wx:index = "index": リストループの後にすべての位置からインデックスにアクセスできます -->
<view class="item" wx:for="{{list}}" wx:index = "index">
 <view class="left">
 <image class="アバター"></image>
 </ビュー>
 <view class="right">
 <view class="nickname">{{item.nickName}}</view>
 <view class="content">{{item.content}}</view>
 <view class="image-list">
  <image class="image" wx:for="{{item.imageList}}"></image>
 </ビュー>
 <view class="time-area">
  <view class="time">{{item.time}}</view>
  <表示>
  <!--
   データインデックス="{{index}}"
   1.設定後、コールバック関数内のcurrentTarget.datasetに表示されます -->
  <image class="operation-button" src="../../images/caozuo.png" catchtap="showOperationPannel" data-index="{{index}}"></image>
  <!-- 現在のインデックスがディスク インデックスと一致しているかどうかを判断します -->
  <view class="操作パネル" wx:if="{{showOperationPannelIndex == index}}">
   <!-- インデックスとクリック機能を設定する -->
   <view class="tab" catchtap="clickLove" data-index="{{index}}">
   <image class="image" src="../../images/love-white.png"></image>
   <text>いいね</text>
   </ビュー>
   <view class="tab">
   <image class="image" src="../../images/comment-white.png"></image>
   <text>コメント</text>
   </ビュー>
  </ビュー>
  </ビュー>
  
 </ビュー>
 <view class="love-comment">
  <!-- 
  item.loveList = item.loveList を繰り返します
  <view class="love" wx:if="{{item.loveList.length > 0}}">
  <image class="love-icon" src="../../images/love-blue.png"></image>
  <text class="love-nickname" wx:for="{{item.loveList}}">蘭陵王老師</text>
  </ビュー>
  -->
  <view class="love" wx:if="{{item.loveList.length > 0}}">
  <image class="love-icon" src="../../images/love-blue.png"></image>
  <!-- love はループ全体の項目と競合しません -->
  <text class="love-nickname" wx:for-items="{{item.loveList}}"
  wx:for-item = "愛"
  >{{love.nickName}}</text>
  </ビュー>
  <view class="comment" wx:if="{{item.commentList.length > 0}}">
  <view wx:for-items="{{item.commentList}}"
  wx:for-item = "コメント">
   <text class="comment-nickname">{{comment.nickName}}</text>
   <text class="comment-content">{{comment.content}}</text>
  </ビュー>
  </ビュー>
 </ビュー>
 </ビュー>
</ビュー>

// ページ/サークル/リスト.js
var それ;
ページ（{

 /**
 * ページの初期データ */
 データ： {
 ユーザー情報:null、
 リスト：[]、
 // 現在のクリック操作パネルのインデックス。友達のサークルごとに 1 つのパネル showOperationPannelIndex:-1、
 },

 /**
 * ライフサイクル機能 - ページの読み込みをリッスンする*/
 onLoad: 関数 (オプション) {
 それ = これ;
 (var i = 1; i < 10; i++) の場合 {
  // データを保存するオブジェクトを定義します var circleData = {};
  circleData.nickName = "友達-" + i;
  circleData.content = "友達の投稿コンテンツ-" + i;
  円データ.time = "2020-05-0" + i;

  //画像リスト var imageList = [];
  // いいねリスト var loveList = [];
  // コメントリスト var commentList = [];


  // これら3つの配列はcircleDataに割り当てられます
  円データ.imageList = imageList;
  サークルデータ.loveList = loveList;
  円データ.コメントリスト = コメントリスト;

  // 3つの配列に値を割り当てる for (var j = 1; j < i; j++) {
  //画像パス、プレースホルダー imageList.push(j);
  // loveList、loveData オブジェクトを定義します var loveData = {};
  loveData.nickName = 'いいね-' + j;
  // loveListにlikes配列を追加する
  loveList.push(loveData);

  //コメントデータ var commentData = {};
  commentData.nickName = "蘭陵王-" + j + "：";
  commentData.content = "コメント内容-" + j;
  // データを追加する commentList.push(commentData);
  }

  that.data.list.push(circleData);
 }
 // 再レンダリングします。setData({
  リスト: that.data.list
 })
 //ユーザー情報を取得する wx.getStorage({
  キー: 'userInfo',
  成功(res){
  //オブジェクトに変換 console.log("getStorage success:",JSON.parse(res.data));
  that.setData({
   ユーザー情報:JSON.parse(res.data)
  })
  }
 })
 },
 //操作パネルの表示を制御する showOperationPannel(e){
 console.log("操作パネルを表示",e);
 // クリックされたインデックスを取得します。var index = e.currentTarget.dataset.index;
 // 表示されている場合、閉じます if(that.data.showOperationPannelIndex == index){
  that.setData({
  // インデックスは 0 から始まります showOperationPannelIndex:-1
  })
 }
 それ以外{
  that.setData({
  // 現在のクリックのインデックスを設定します showOperationPannelIndex:index
  })
 }
 
 },
 // 関数 clickLove(e){ のように
 コンソールログ(e);
 var インデックス = e.currentTarget.dataset.index;
 // このデータを取得します var circleData = that.data.list[index];
 var loveList = circleData.loveList;
 var isHaveLove = false;
 for(var i = 0; i < loveList.length; i++){
  if(that.data.userInfo.nickName == loveList[i].nickName){
  ラブを持っているかどうか
  // いいねを削除する loveList.splice(i,1);
  壊す;
  }
 }

 if(!isHaveLove){
  loveList.push({nickName:that.data.userInfo.nickName});
 }
 that.setData({
  リスト:そのデータリスト、
  // いいねとコメントパネルを閉じる showOperationPannelIndex:-1
 })

 },
 
})