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

微信

12 浏览量更新于2023-05-04 1 收藏 105KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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

wxml界面使用image标签

js文件上的脚本：

// pages/post_detail/post_detail.js

var 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) {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38637665

粉丝: 4
资源: 951

会员权益专享

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

微信小程序收藏功能的实现代码

微信小程序商品详情页交互源码（选择商品类型切换、预览商品图片）

星星-点击收藏/取消收藏

微信小程序分享功能与实现

微信小程序音视频功能实现与优化

微信小程序实现下单与订单管理

使用微信小程序开发新闻阅读页的收藏与分享功能

微信小程序实现订单支付与退款

微信小程序 商品收藏功能实现思路

微信小程序点赞收藏功能实现

微信小程序实现支付功能

微信小程序实现快递查询的时序图

微信小程序实现登陆注册功能

微信小程序 ios 上滑取消语音功能

微信小程序实现个人主页

微信小程序云开发 基于微信小程序实现房产中介平台系统

微信小程序实现回复自动刷新功能

微信小程序毕设常问的问题

微信小程序收藏页面csdn

预约时间安排微信小程序实现c++

会员权益专享

最新资源

微信小程序商品收藏功能实现思路

微信小程序云开发基于微信小程序实现房产中介平台系统