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.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
Akan R.E.P.O. Ada Crossplay?
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa