微信小程序实现收藏与取消收藏切换图片功能

页面结构界面使用图像标签

image wx : if=' { { collected } } ' catch tap='肿瘤科精选轻按“src=”/图像/图标/收藏。png '/image image wx : else src='/images/icon/collection-anti。png“catch tap=”肿瘤科精选点击“/imagejs”文件上的脚本：

//page/post _ detail/post _ detail。jsvar PostDATa=require('././data/post _ data。js’)页面({ /** *页面的初始数据*/data: { }，/** *生命周期函数-监听页面加载*/onLoad:函数（选项){ var postId=options.idthis。数据。current PostID=PostID var PostSData=PostDATa。PostList[PostID]；控制台。日志(PostSData)；//这个。数据。PostDATa=PostSData这个。setdata({ post _ key : postsData })//var postsCollected={//1: ' true '，//2:'false '，//3:'true '，//}//console。日志(PostSData)；//从缓存中读取所有的缓存状态var postsCollected=wx。getstorageync(' post _ Collected ')//如果缓存为真，执行以下代码if (postsCollected) { //读取其中一个缓存状态var postsCollected=postsCollected[postId]this。setdata({//将是否被收藏的状态上绑定到收集这个变量上collected d : PostsCollected })else { var PostsCollected={ }；postsCollected[PostID]=false；wx。setstoragesync(' post _ Collected '，postsCollected) } }，肿瘤科肿瘤选择：函数（事件){ //获取缓存的方法var postsCollected=wx。getstoragesync(' post _ Collected ')；var post collected=postsCollected[this。数据。当前位置]；console.log(后收集);//取反操作，收藏的话，点击变成未收藏，反之，变成收藏。后收集=！后收集；postsCollected[这个。数据。当前位置]=后选；////更新文章是否收藏的缓存值//wx。setstoragesync(' post _ Collected '，postsCollected) ///更新数据绑定变量，从而实现切换图片。//这个。setdata({//collected d : post collected/})这。显示模式(帖子已评分，帖子已收集)//wx。show toast({//title :帖子收藏？'收藏成功' : '取消收藏，//duration: 800，//icon : ' success '///})//wx。显示模态({//title : '确定收藏，//content: '这是一个模态弹窗，//成功：函数(RES){//if(RES . confirm){//console。日志('用户点击确定)//} else if(RES . cancel){//console。日志('用户点击取消)//}/}/}/}/}/})控制台。日志('肿瘤科选举轻按')；},//使用显示模式应用编程接口来实现界面上逻辑操作showModal:函数（后置收集，后置收集){//这个注意一下，由于这是在页下调用的方法，这里是在自定义函数下，所有必须重新赋值到一个新的变量，才能重新使用，不明白的同学们，记住就行var ts=这个；wx.showModal({ title: '收藏，content:后收集？'收藏该文章' : '取消收藏该文章，成功：函数如果确认。setstoragesync(' post _ Collected '，postsCollected) //更新数据绑定变量，从而实现切换图片ts。setdata({ collected d : post collected })控制台。日志('用户点击确定)} else if(RES . cancel){ console。日志('用户点击取消)} } }) },//肿瘤科选举Tap:函数（事件){//var Bao Xue=wx。getstorage sync(' key ')；//console.log(宝雪);//}，onShareTap:函数（事件){//wx。removestoragesync(' key ')//缓存的上限最大不能超过10MB wx。ClearStorageync()；控制台。日志(' OnSharetap ')；}, /** * 生命周期函数-监听页面初次渲染完成*/onReady:函数(){ },/** *生命周期函数-监听页面显示*/OnShaw :函数(){ },/** *生命周期函数-监听页面隐藏*/onHide:函数(){ },/** *生命周期函数-监听页面卸载*/onUnload:函数(){ },/** *页面相关事件处理函数-监听用户下拉动作*/onpulldownlrefresh :函数(){ },/** *页面上拉触底事件的处理函数*/onReachBottom:函数(){ console.log('到底了');}, /** * 用户点击右上角分享*/onsharappmessage :函数(){ } })

总结

以上是边肖推出的微信小程序，实现收藏和取消收藏之间切换图片的功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！