cari
Rumahapplet WeChatPembangunan program mini关于微信小程序收藏功能的实现

这篇文章主要介绍了微信小程序收藏功能的实现代码,基本功能是点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目。需要的朋友可以参考下

需求

点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目

需要解决的问题

  1. 点击收藏后需要显示已收藏,并且文字状态改变

  2. 另一个页面如何知道你点击了收藏,并且获得你点击收藏的数据

如何解决?

  1. 数据状态绑定,并且由状态控制样式(三元运算符)

  2. 缓存(setStorageSync,getStorageSync),点击页面设置缓存(数据的id),显示页面获取缓存,通过获得缓存id,将整个数据中的获得的id那一项,取出,放入新的数组

具体实现

wxml

<image class="save " src="{{isClick?&#39;../../youzan-image/save-s.png&#39;:&#39;../../youzan-image/save.png&#39;}}" bindtap="haveSave"></image>
   <text class="saveText">{{isClick?&#39;已收藏&#39;:&#39;收藏&#39;}}</text>

点击页面js

 Page({
  data: {
  job: [],
  jobList: [],
  id: &#39;&#39;,
  isClick: false,
  jobStorage: [],
  jobId: &#39;&#39;
  },
  haveSave(e) {
  if (!this.data.isClick == true) {
   let jobData = this.data.jobStorage;
   jobData.push({
   jobid: jobData.length,
   id: this.data.job.id
   })
   wx.setStorageSync(&#39;jobData&#39;, jobData);//设置缓存
   wx.showToast({
   title: &#39;已收藏&#39;,
   });
  } else {
   wx.showToast({
   title: &#39;已取消收藏&#39;,
   });
  }
  this.setData({
   isClick: !this.data.isClick
  })
  }
 })

显示页面js

import jobList from &#39;../../api/detail&#39;
Page({
 data: {
 id:&#39;&#39;,
 job:[],
 savejob:[],
 },
 onLoad: function (options) {
 console.log(wx.getStorageSync(&#39;jobData&#39;));
 let savejob = wx.getStorageSync(&#39;jobData&#39;)//获得缓存
 let index = savejob.length-1;
 console.log(savejob[index].id);
 let jobid = savejob[index].id
 let temp= jobList[jobid] //将获得缓存后匹配的数据放入新的数组
 let job= [];
 job.push(temp);
 this.setData({
  id:index,
  job: job,
 })
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

微信小程序之点赞和删除列表以及分享的功能实现

微信小程序中滚动消息通知的实现

微信小程序动态显示项目倒计时的效果

Atas ialah kandungan terperinci 关于微信小程序收藏功能的实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

VSCode Windows 64-bit Muat Turun

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft