老师可以帮我看下,我这是哪里出现问题了?

老师可以帮我看下,我这是哪里出现问题了?

点击收藏按钮,图片切换到高亮了,但是再点击的时候,图片不切换成,取消收藏(未收藏)的图片,Storage缓存的始终是true, 控制台也不错误呢。

<!-- 先静 后动  先样式再数据 -->
<view class="container">
<image  class="head-image" src="{{post11Data.headImgSrc}}"></image>
<image class="audio" src="/images/music/music-start.png"></image>
<view class="author-date">
<image class="avatar" src="{{post11Data.avatar}}"></image>
<text class="author">{{post11Data.author}}</text>
<text class="const-text">发表于</text>
<text class="date">{{post11Data.dateTime}}</text>
</view>
<text class="title">{{post11Data.title}}</text>
<view class="tool">
<view class="circle-img">
<!-- 被收藏的 高亮的 -->
<image wx:if="{{collected}}" src="/images/icon/collection.png"></image>
<!-- 未收藏的  灰色的   默认的页面的初始状态 -->
<image wx:else src="/images/icon/collection-anti.png" catchtap="onCollectionTap"></image>
<image class="share-img" src="/images/icon/share.png" catchtap="onCollectionTap"></image>
</view>
<view class="horizon"></view>
</view>
<text class="detail">{{post11Data.detail}}</text>
</view>

//posts-deails.js  ::: 

var postsData = require("./../../../data/posts-data.js");
Page({

/**
   * 页面的初始数据
   */
data: {
},

/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
// 成功的从post 传到 posts-detail
var postId = options.id;
// console.log(postId)
var postData = postsData.postList[postId];
this.setData({
post11Data:postData,
currentPostId: postId
});
// var postsColleted = {
//   1:"true",
//   2:"false",
//   3:"false"
// }
//1. 读取  缓存的状态
var postsCollected = wx.getStorageSync("posts_collected");
// 2.当前页面的 每个缓存的状态的   id号  
// 如果缓存状态  存在的  我们才能读取 这个页面中的数据
if (postsCollected){
var postCollected = postsCollected[postId];
// 数据的更新  目的是把数据绑定上去
this.setData({
collected: postCollected
// 控制显示 隐藏状态的。
})
}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];
// 收藏变成 未收藏    未收藏 变成收藏。  
postCollected = !postCollected;

// 更新缓存:
postsCollected[this.data.currentPostId] = postCollected;
// 更新 文章是否 存在缓存值
wx.setStorageSync("posts_collected",postsCollected);
// 更新数据绑定变量,从而实现图片切换
this.setData({
collected:postCollected
});
}
})


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

4回答
好帮手慕言 2020-04-16 18:31:42

同学你好,这边修改之后,效果是正常的,控制台没有报错。这边只修改了下方一处:

http://img1.sycdn.imooc.com//climg/5e983371099d4e8b07740075.jpg

修改后的代码:

<!-- 被收藏的 高亮的 -->
<image wx:if="{{collected}}" src="/images/icon/collection.png" catchtap="onCollectionTap"></image>
<!-- 未收藏的  灰色的   默认的页面的初始状态 -->
<image wx:else src="/images/icon/collection-anti.png" catchtap="onCollectionTap"></image>

在测试效果之前记得清除下缓存。另外:同学也可以下载源码,

http://img1.sycdn.imooc.com//climg/5e9833ea093deb4805210436.jpg

把自己的这段代码放到源码中再测试下,祝学习愉快~

提问者 再坚持坚持一下 2020-04-16 16:38:43

http://img1.sycdn.imooc.com//climg/5e98194d0927b74c12030543.jpg老师 事件我添加上了 但是还是报错了一项  不知道是那块原因? 老师在指点下

好帮手慕言 2020-04-16 15:18:55

同学你好,在同学提供的代码中,是没有绑定事件的,如下:

http://img1.sycdn.imooc.com/climg/5e98067a09bcf76c07280126.jpg

建议:可以按照第一次回复中的代码修改,如下:
http://img1.sycdn.imooc.com/climg/5e9806bb09b52c8407760076.jpg

同学修改后再测试下。祝学习愉快~

好帮手慕言 2020-04-15 17:03:16

同学你好,是没有给被收藏的图片绑定点击事件。可以参考下方修改:
http://img1.sycdn.imooc.com//climg/5e96cdbf097511bc08040087.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 再坚持坚持一下 #1
    老师我的事件 就是这样的啊 怎么说 没有绑定呢?
    2020-04-16 14:20:08
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师