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.jsvar postData = require("../../data/posts_data.js")Page({  /**   * 页面的初始数据   */  data: {  },  /**   * 生命周期函数--监听页面加载   */  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);    // 从缓存中读取所有的缓存状态    var postsCollected = wx.getStorageSync("posts_Collected")    //如果缓存为真，执行以下代码    if (postsCollected) {      //读取其中一个缓存状态      var postsCollected = postsCollected[postId]      this.setData({        //将是否被收藏的状态上绑定到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)    // //更新数据绑定变量,从而实现切换图片。    // this.setData({    //   collected: postCollected    // })    this.showModal(postsCollected, postCollected)    // wx.showToast({    //   title: postCollected ? "收藏成功" : "取消收藏",    //   duration: 800,    //   icon: "success"    // })    // wx.showModal({    //   title: '确定收藏',    //   content: '这是一个模态弹窗',    //   success: function (res) {    //     if (res.confirm) {    //       console.log('用户点击确定')    //     } else if (res.cancel) {    //       console.log('用户点击取消')    //     }    //   }    // })    console.log("onCollectionTap");  },//使用showModal API来实现界面上逻辑操作。  showModal: function(postsCollected, postCollected) {//这个注意一下，由于this是在page下调用的方法，这里是在自定义函数下，所有必须重新赋值到一个新的变量，才能重新使用，不明白的同学们，记住就行。    var ts = this;    wx.showModal({      title: '收藏',      content: postCollected ? "收藏该文章" : "取消收藏该文章",      success: function(res) {        if (res.confirm) {          wx.setStorageSync('posts_Collected', postsCollected)          //更新数据绑定变量,从而实现切换图片。          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");  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function() {  },  /**   * 生命周期函数--监听页面显示   */  onShow: function() {  },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function() {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function() {  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function() {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function() {    console.log("到底了");  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function() {  }})

这个是对之前做完的整理，需要的话可以去慕课网购买7月老师的视频。有什么问题可以加我微信cdycslcbh，免费解答。