微信小程式點選切換圖片、收藏功能的實現！
阿新 • • 發佈：2018-12-31
微信小程式圖片點選切換和收藏功能是非常常用的！有更好寫法的請留言，喜歡小程式和web前端開發的請加我微信Angelo_Sifan
效果圖如下
1 <image catchtap='onCollectionTap' wx:if="{{collected}}" src="/images/icon/collect1.png"></image> 2 <image wx:else catchtap='onCollectionTap' src="/images/icon/collect.png"></image>
首先對Image繫結相應變數，選用catchxxx而不選用bindxxx進行繫結是因為，catch不會出發冒泡事件就不會向父節點傳遞，寫的過程中一定要用wx:if和wx:else來進行判斷。然後我們還需要在JS中對onCollectionTap變數進行定義，最後當元件觸發事件時，邏輯層繫結該事件的處理函式會收到一個事件物件。
| 12345678910111213141516171819202122232425262728293031323334353637 | /*這是對應的JS檔案*/2 Page({3 data: {45 },6 onLoad: function (option) {7 var postId = option.id;//要先在對應的資料文字中對每個欄目定義postId、比如postId: 0 postId:18 this.data.currentPostId = postId; //藉助頂部data作為中轉，拿到上面這行postid後，將它放到下面var postCollected = postsCollected[]中9 //將這個postId從onLoad中傳遞到下面的onCollectionTap中10 var postData = postsData.postList[postId];//定義每個新聞列表對應順序是哪個新聞內容1112 //使用者收藏功能14 var postsCollected = wx.getStorageSync('posts_collected') //從快取中讀取所有的快取狀態15 if (postsCollected) { //postsCollected為真的情況，在快取中存在16 var postCollected = postsCollected[postId]//讀取其中一個快取狀態17 this.setData({18 collected: postCollected //將是否被收藏的狀態上繫結到collected這個變數上19 })20 }21 else { //為假的情況，快取中為空的情況22 var postsCollected = { }; //對postsCollected進行一個賦值操作，從而防止為空，從而省掉後面對它是否為空進行測試的步驟23 postsCollected[postId] = false; // 讓當前的這篇文章狀態為false，從而收藏星星不點亮24 wx.setStorageSync('posts_collected', postsCollected);//將postsCollected物件放到快取中25 }26 },27 onCollectionTap: function (event) { // 定義onCollectionTap事件用來確定文章是否收藏，如果沒收藏就能點亮星星進行收藏28 var postsCollected = wx.getStorageSync('posts_collected'); //獲取快取的方法29 var postCollected = postsCollected[this.data.currentPostId]; //確定當前文章是否有快取的狀態，傳遞引數方法、藉助其他引數來傳遞變數，如上的data30 postCollected = !postCollected;// 取反操作，收藏變成未收藏、未收藏變為收藏31 postsCollected[this.data.currentPostId] = postCollected;//整體快取的某一篇文章的快取值等於postCollected從而更新一個變數32 wx.setStorageSync('posts_collected', postsCollected);//更新文章是否收藏的快取值,相當於在資料庫中做了一次更新。33 //更新Data的資料繫結變數,從而實現圖片切換34 this.setData({35 collected: postCollected //當前的collected為postCollected36 })37 }38 )} |
原文連結：https://www.cnblogs.com/EdisonVan/p/9027535.html