欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-12-31 23:10:44
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) {
  //    console.log('用户点击取消')
  //   }
  //  }
  // })
  console.log("oncollectiontap");
 },
//使用showmodal api来实现界面上逻辑操作。
 showmodal: function(postscollected, postcollected) {
//这个注意一下,由于this是在page下调用的方法,这里是在自定义函数下,所有必须重新赋值到一个新的变量,才能重新使用,不明白的同学们,记住就行。
  var ts = this;
  wx.showmodal({
   title: '收藏',
   content: postcollected ? "收藏该文章" : "取消收藏该文章",
   success: function(res) {
    if (res.confirm) {
     wx.setstoragesync('posts_collected', postscollected)
     //更新数据绑定变量,从而实现切换图片。
     ts.setdata({
      collected: postcollected
     })
     console.log('用户点击确定')
    } else if (res.cancel) {
     console.log('用户点击取消')
    }
   }
  })
 },
 // oncollectiontap: function(event) {
 //  var baoxue = wx.getstoragesync("key");
 //  console.log(baoxue);
 // },
 onsharetap: function(event) {
  // wx.removestoragesync("key")
  //缓存的上限最大不能超过10mb
  wx.clearstoragesync();
  console.log("onsharetap");
 },
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onready: function() {
 },
 /**
  * 生命周期函数--监听页面显示
  */
 onshow: function() {
 },
 /**
  * 生命周期函数--监听页面隐藏
  */
 onhide: function() {
 },
 /**
  * 生命周期函数--监听页面卸载
  */
 onunload: function() {
 },
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onpulldownrefresh: function() {
 },
 /**
  * 页面上拉触底事件的处理函数
  */
 onreachbottom: function() {
  console.log("到底了");
 },
 /**
  * 用户点击右上角分享
  */
 onshareappmessage: function() {
 }
})

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

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

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

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

总结

以上所述是小编给大家介绍的微信小程序实现收藏与取消收藏切换图片功能,希望对大家有所帮助

上一篇: AI简单绘制一个星形足球标志

下一篇: Ubuntu14.04虚拟机安装(图文详解)

推荐阅读