老师可以帮我看下,我这是哪里出现问题了?
点击收藏按钮,图片切换到高亮了,但是再点击的时候,图片不切换成,取消收藏(未收藏)的图片,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
});
}
})31
收起
正在回答 回答被采纳积分+1
4回答
好帮手慕言
2020-04-16 18:31:42
同学你好,这边修改之后,效果是正常的,控制台没有报错。这边只修改了下方一处:

修改后的代码:
<!-- 被收藏的 高亮的 -->
<image wx:if="{{collected}}" src="/images/icon/collection.png" catchtap="onCollectionTap"></image>
<!-- 未收藏的 灰色的 默认的页面的初始状态 -->
<image wx:else src="/images/icon/collection-anti.png" catchtap="onCollectionTap"></image>在测试效果之前记得清除下缓存。另外:同学也可以下载源码,

把自己的这段代码放到源码中再测试下,祝学习愉快~
3.WebAPP开发与小程序
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。
了解课程
老师 事件我添加上了 但是还是报错了一项 不知道是那块原因? 老师在指点下


恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星