この記事では、WeChatアプレットの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 1. 効果2. 実装1. 論理 1. ログイン時にユーザーデータはローカルにキャッシュされます。onloadではユーザー情報がローカルで取得され、data.userInfoに保存されます。 2.wxml <!-- 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> </ビュー> </ビュー> </ビュー> </ビュー> </ビュー> 3.js // ページ/サークル/リスト.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 }) }, }) 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: FileZilla Server の FTP サーバー構成と 425 エラーおよび TLS 警告の解決策の詳細な説明
>>: 練習と面接のための Linux シェル スクリプトのヒント 9 つを共有する
キーワード 一般タイトルには、クラック、キー、シリアル番号、キージェネレータなどの単語を含めることは...
OracleデータベースからエクスポートされたデータをMySqlデータベースにインポートします。 1...
Jsでのこれの深い理解JavaScriptスコープはstatic scopeスコープですが、 Jsの...
1. 兄弟要素の余白を結合する効果は次のようになります: (2 つの間の間隔は 150 ピクセルでは...
目次序文ローカルストレージの使用シナリオ使用上の問題解決機能性有効期限を追加データ暗号化を追加する命...
CSS ビューポート ユニットはここ数年登場しており、時が経つにつれて、ますます多くの開発者が使用し...
今日は断片化された画像の読み込み効果を実装します。効果は次のとおりです。 これを 3 つのステップで...
水平方向では、行の配置を左、中央、右に設定できます。基本的な構文<TR ALIGN="...
1. 絶対配置レイヤーの隣接フローティング レイヤーの幅が親レイヤーの幅と等しくなく、フロートがクリ...
CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...
mysqlは指定された期間内の統計データを取得します年別統計 選択 カウント(*)、 DATE_FO...
React Native は、2015 年 4 月に Facebook によってオープンソース化され...
前提複雑なシナリオでは、複数の異なるページ間で大量のデータを使用したり変更したりする必要があります。...
目次1. ソリューション 1 (UDF)デモケース2. ソリューション2(binlogの解析)キャナ...
最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...