這篇文章主要介紹了微信小程序中如何實現(xiàn)收藏與取消收藏圖片功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)主要從事成都做網站、成都網站制作、成都外貿網站建設、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務寧遠,十多年網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:028-86922220

wxml界面使用image標簽

<image wx:if="{{collected}}" catchtap='onCollectionTap' src='/images/icon/collection.png'></image>
   <image wx:else src='/images/icon/collection-anti.png' catchtap='onCollectionTap'></image>

js文件上的腳本：

// pages/post_detail/post_detail.js
var postData = require("../../data/posts_data.js")
Page({
 /**
  * 頁面的初始數(shù)據
  */
 data: {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function(options) {
  var postId = options.id;
  this.data.currentPostId = postId
  var postsData = postData.postList[postId];
  console.log(postsData);
  // this.data.postData=postsData;
  this.setData({
   post_key: postsData
  })
  // var postsCollected={
  //  1:"true",
  //  2:"false",
  //  3:"true",
  // }
  // console.log(postData);
  // 從緩存中讀取所有的緩存狀態(tài)
  var postsCollected = wx.getStorageSync("posts_Collected")
  //如果緩存為真，執(zhí)行以下代碼
  if (postsCollected) {
   //讀取其中一個緩存狀態(tài)
   var postsCollected = postsCollected[postId]
   this.setData({
    //將是否被收藏的狀態(tài)上綁定到collected這個變量上
    collected: postsCollected
   })
  } else {
   var postsCollected = {};
   postsCollected[postId] = false;
   wx.setStorageSync("posts_Collected", postsCollected)
  }
 },
 onCollectionTap: function(event) {
  //獲取緩存的方法
  var postsCollected = wx.getStorageSync('posts_Collected');
  var postCollected = postsCollected[this.data.currentPostId];
  console.log(postCollected);
  //取反操作，收藏的話，點擊變成未收藏，反之，變成收藏。
  postCollected = !postCollected;
  postsCollected[this.data.currentPostId] = postCollected;
  // //更新文章是否收藏的緩存值。
  // wx.setStorageSync('posts_Collected', postsCollected)
  // //更新數(shù)據綁定變量,從而實現(xiàn)切換圖片。
  // this.setData({
  //  collected: postCollected
  // })
  this.showModal(postsCollected, postCollected)
  // wx.showToast({
  //  title: postCollected ? "收藏成功" : "取消收藏",
  //  duration: 800,
  //  icon: "success"
  // })
  // wx.showModal({
  //  title: '確定收藏',
  //  content: '這是一個模態(tài)彈窗',
  //  success: function (res) {
  //   if (res.confirm) {
  //    console.log('用戶點擊確定')
  //   } else if (res.cancel) {
  //    console.log('用戶點擊取消')
  //   }
  //  }
  // })
  console.log("onCollectionTap");
 },
//使用showModal API來實現(xiàn)界面上邏輯操作。
 showModal: function(postsCollected, postCollected) {
//這個注意一下，由于this是在page下調用的方法，這里是在自定義函數(shù)下，所有必須重新賦值到一個新的變量，才能重新使用，不明白的同學們，記住就行。
  var ts = this;
  wx.showModal({
   title: '收藏',
   content: postCollected ? "收藏該文章" : "取消收藏該文章",
   success: function(res) {
    if (res.confirm) {
     wx.setStorageSync('posts_Collected', postsCollected)
     //更新數(shù)據綁定變量,從而實現(xiàn)切換圖片。
     ts.setData({
      collected: postCollected
     })
     console.log('用戶點擊確定')
    } else if (res.cancel) {
     console.log('用戶點擊取消')
    }
   }
  })
 },
 // onCollectionTap: function(event) {
 //  var baoxue = wx.getStorageSync("key");
 //  console.log(baoxue);
 // },
 onShareTap: function(event) {
  // wx.removeStorageSync("key")
  //緩存的上限最大不能超過10MB
  wx.clearStorageSync();
  console.log("onShareTap");
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
  */
 onReady: function() {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面顯示
  */
 onShow: function() {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面隱藏
  */
 onHide: function() {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面卸載
  */
 onUnload: function() {
 },
 /**
  * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
  */
 onPullDownRefresh: function() {
 },
 /**
  * 頁面上拉觸底事件的處理函數(shù)
  */
 onReachBottom: function() {
  console.log("到底了");
 },
 /**
  * 用戶點擊右上角分享
  */
 onShareAppMessage: function() {
 }
})

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序中如何實現(xiàn)收藏與取消收藏圖片功能”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

文章名稱：微信小程序中如何實現(xiàn)收藏與取消收藏圖片功能
標題鏈接：http://jinyejixie.com/article28/ppjhcp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、App設計、網站營銷、靜態(tài)網站、域名注冊、標簽優(yōu)化

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)