WeChat Mini-Programm implementiert den Likes-Dienst

<!-- 
 wx:index = "index": Alle Positionen können nach der Listenschleife auf den Index zugreifen -->
<Ansichtsklasse="Element" wx:für="{{Liste}}" wx:index = "Index">
 <Ansichtsklasse="links">
 <Bildklasse="Avatar"></Bild>
 </Ansicht>
 <Ansichtsklasse="rechts">
 <view class="nickname">{{item.nickName}}</view>
 <view class="content">{{item.content}}</view>
 <Klasse anzeigen="Bildliste">
  <image class="image" wx:for="{{item.imageList}}"></image>
 </Ansicht>
 <Ansichtsklasse="Zeitbereich">
  <view class="Zeit">{{item.Zeit}}</view>
  <Ansicht>
  <!--
   Datenindex="{{index}}"
   1. Nach dem Setzen wird es in currentTarget.dataset in der Callback-Funktion angezeigt -->
  <image class="operation-button" src="../../images/caozuo.png" catchtap="showOperationPannel" data-index="{{index}}"></image>
  <!-- Bestimmen Sie, ob der aktuelle Index mit dem Datenträgerindex übereinstimmt -->
  <view class="operation-pannel" wx:if="{{showOperationPannelIndex == index}}">
   <!-- Index und Klickfunktion festlegen -->
   <view class="tab" catchtap="clickLove" data-index="{{index}}">
   <Bild Klasse="Bild" src="../../images/love-white.png"></Bild>
   <text>Gefällt mir</text>
   </Ansicht>
   <Ansichtsklasse="Tabulator">
   <image class="image" src="../../images/comment-white.png"></image>
   <text>Kommentare</text>
   </Ansicht>
  </Ansicht>
  </Ansicht>
  
 </Ansicht>
 <Ansichtsklasse="Liebeskommentar">
  <!-- 
  item.loveList = wiederhole item.loveList
  <Ansicht Klasse="Liebe" wx:if="{{item.loveList.length > 0}}">
  <image class="love-icon" src="../../images/love-blue.png"></image>
  <text class="love-nickname" wx:for="{{item.loveList}}">Alter Meister Lanling Wang</text>
  </Ansicht>
  -->
  <Ansicht Klasse="Liebe" wx:if="{{item.loveList.length > 0}}">
  <image class="love-icon" src="../../images/love-blue.png"></image>
  <!-- Liebe steht nicht im Konflikt mit den Elementen in der gesamten Schleife -->
  <text Klasse="Liebes-Spitzname" wx:for-items="{{item.loveList}}"
  wx:for-item = "Liebe"
  >{{love.nickName}}</text>
  </Ansicht>
  <view class="Kommentar" wx:if="{{item.commentList.length > 0}}">
  <Ansicht wx:for-items="{{item.commentList}}"
  wx:for-item = "Kommentar">
   <text class="comment-nickname">{{comment.nickName}}</text>
   <text class="comment-content">{{comment.content}}</text>
  </Ansicht>
  </Ansicht>
 </Ansicht>
 </Ansicht>
</Ansicht>

// Seiten/Kreis/Liste.js
var das;
Seite({

 /**
 * Ausgangsdaten der Seite */
 Daten: {
 Benutzerinfo:null,
 Liste:[],
 // Der Index des aktuellen Klickoperationsfelds, ein Feld für jeden Freundeskreis showOperationPannelIndex:-1,
 },

 /**
 * Lebenszyklusfunktion - auf Seitenladen warten*/
 onLoad: Funktion (Optionen) {
 das = dies;
 für (var i = 1; i < 10; i++) {
  // Definieren Sie ein Objekt zum Speichern von Daten var circleData = {};
  circleData.nickName = "Freund-" + i;
  circleData.content = "Freunde posten Inhalte-" + i;
  KreisDaten.Zeit = "2020-05-0" + i;

  //Bilderliste var imageList = [];
  // Wie Liste var loveList = [];
  // Kommentarliste var commentList = [];


  // Diese drei Arrays werden circleData zugewiesen
  circleData.imageList = Bilderliste;
  Kreisdaten.Liebesliste = Liebesliste;
  circleData.commentList = Kommentarliste;

  // Werte den 3 Arrays zuweisen for (var j = 1; j < i; j++) {
  //Bildpfad, Platzhalter imageList.push(j);
  // loveList, definiere loveData-Objekt, var loveData = {};
  loveData.nickName = 'Gefällt mir-' + j;
  // Fügen Sie das Likes-Array zur LoveList hinzu
  Liebesliste.push(Liebesdaten);

  //Kommentardaten var commentData = {};
  commentData.nickName = "Lanling King-" + j + "：";
  commentData.content = "Kommentarinhalt-" + j;
  // Daten hinzufügen commentList.push(commentData);
  }

  das.Daten.Liste.push(circleData);
 }
 // Rendere that.setData({ erneut
  Liste: diese.Daten.Liste
 })
 //Benutzerinformationen abrufen wx.getStorage({
  Schlüssel: 'Benutzerinfo',
  Erfolg(res){
  //In Objekt konvertieren console.log("getStorage success:",JSON.parse(res.data));
  dass.setData({
   Benutzerinfo:JSON.parse(res.data)
  })
  }
 })
 },
 //Steuerung der Anzeige des Bedienfelds showOperationPanel(e){
 console.log("showOperationPanel",e);
 // Den angeklickten Index abrufen var index = e.currentTarget.dataset.index;
 // Wenn es angezeigt wird, schließen Sie es, if(that.data.showOperationPannelIndex == index){
  dass.setData({
  // Index beginnt bei 0 showOperationPanelIndex:-1
  })
 }
 anders{
  dass.setData({
  // Auf den Index des aktuellen Klicks setzen showOperationPannelIndex:index
  })
 }
 
 },
 // Wie die Funktion clickLove(e){
 konsole.log(e);
 var index = e.currentTarget.dataset.index;
 // Diese Daten herausholen var circleData = that.data.list[index];
 var Liebesliste = Kreisdaten. Liebesliste;
 var istHaveLove = false;
 für(var i = 0; i < loveList.length; i++){
  wenn(das.daten.userInfo.nickName == loveList[i].nickName){
  istHaveLove = wahr;
  // „Gefällt mir“-Angaben entfernen loveList.splice(i,1);
  brechen;
  }
 }

 wenn(!istHabeLiebe){
  loveList.push({nickName:that.data.userInfo.nickName});
 }
 dass.setData({
  Liste:diese.Datenliste,
  // Schließen Sie das „Gefällt mir“- und Kommentarfeld. showOperationPannelIndex:-1
 })

 },
 
})