老师可以帮我看下,我这是哪里出现问题了?
点击收藏按钮,图片切换到高亮了,但是再点击的时候,图片不切换成,取消收藏(未收藏)的图片,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 星