この記事では、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 つを共有する
Nginx をコンパイルしてインストールするときに、http_ssl_module などの一部のモジ...
1|0MySQL(MariaDB) 1|11. 説明MariaDB データベース管理システムは My...
データベースを使用するアプリケーションを開発する場合、必然的にユニオンクエリを使用する必要があります...
1. システム内で開いているファイルの最大数を確認する #現在のリソース制限設定を表示する ulim...
目次Anaconda の紹介1. ダウンロード1.1 インストールパッケージを保存するフォルダを作成...
アイコン処理ソリューションこの記録の目的は、element-plus 以外のアイコンをコンポーネント...
概要クラウド プラットフォームのお客様のサーバーでは、業務量が拡大し続けるとディスク容量が不足する場...
序文Docker と VS Code を使用すると、ローカル開発環境全体を最適化し、プロジェクトの進...
推奨される Docker 学習教材: https://www.runoob.com/docker/d...
フロントエンドcss3 フィルターは、Web ページのグレー効果を実現できるだけでなく、ナイト モー...
<br />解決手順は次のとおりです。スタート -> 実行 -> reged...
この記事では、簡単なドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
日常の開発では、データベースの追加、削除、変更、クエリが一般的に行われるため、Mysql で NUL...
Linuxアラーム機能の紹介上記のコード: #include <stdio.h> #in...
目次実装のアイデアアカウント パスワードを保存する方法は 3 つあります。機能インターフェースアカウ...