微信小程序点击切换图片、收藏功能的实现!

it2022-05-06  5

微信小程序图片点击切换和收藏功能是非常常用的!有更好写法的请留言,喜欢小程序和web前端开发的请加我微信Angelo_Sifan

效果图如下

1 <image catchtap='onCollectionTap' wx:if="{{collected}}" src="/images/icon/collect1.png"></image> 2 <image wx:else catchtap='onCollectionTap' src="/images/icon/collect.png"></image>

首先对Image绑定相应变量,选用catchxxx而不选用bindxxx进行绑定是因为,catch不会出发冒泡事件就不会向父节点传递,写的过程中一定要用wx:if和wx:else来进行判断。然后我们还需要在JS中对onCollectionTap变量进行定义,最后当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。

/*这是对应的JS文件*/ 2 Page({ 3 data: { 4 5 }, 6 onLoad: function (option) { 7 var postId = option.id;//要先在对应的数据文本中对每个栏目定义postId、比如postId: 0 postId:1 8 this.data.currentPostId = postId; //借助顶部data作为中转,拿到上面这行postid后,将它放到下面var postCollected = postsCollected[]中 9 //将这个postId从onLoad中传递到下面的onCollectionTap中 10 var postData = postsData.postList[postId];//定义每个新闻列表对应顺序是哪个新闻内容 11 12 //用户收藏功能 14 var postsCollected = wx.getStorageSync('posts_collected') //从缓存中读取所有的缓存状态 15 if (postsCollected) { //postsCollected为真的情况,在缓存中存在 16 var postCollected = postsCollected[postId]//读取其中一个缓存状态 17 this.setData({ 18 collected: postCollected //将是否被收藏的状态上绑定到collected这个变量上 19 }) 20 } 21 else { //为假的情况,缓存中为空的情况 22 var postsCollected = { }; //对postsCollected进行一个赋值操作,从而防止为空,从而省掉后面对它是否为空进行测试的步骤 23 postsCollected[postId] = false; // 让当前的这篇文章状态为false,从而收藏星星不点亮 24 wx.setStorageSync('posts_collected', postsCollected);//将postsCollected对象放到缓存中 25 } 26 }, 27 onCollectionTap: function (event) {    // 定义onCollectionTap事件用来确定文章是否收藏,如果没收藏就能点亮星星进行收藏 28 var postsCollected = wx.getStorageSync('posts_collected'); //获取缓存的方法 29 var postCollected = postsCollected[this.data.currentPostId]; //确定当前文章是否有缓存的状态,传递参数方法、借助其他参数来传递变量,如上的data 30 postCollected = !postCollected;// 取反操作,收藏变成未收藏、未收藏变为收藏 31 postsCollected[this.data.currentPostId] = postCollected;//整体缓存的某一篇文章的缓存值等于postCollected从而更新一个变量 32 wx.setStorageSync('posts_collected', postsCollected);//更新文章是否收藏的缓存值,相当于在数据库中做了一次更新。 33 //更新Data的数据绑定变量,从而实现图片切换 34 this.setData({ 35 collected: postCollected //当前的collected为postCollected 36 }) 37 } 38 )}

  

 

 

 

转载于:https://www.cnblogs.com/EdisonVan/p/9027535.html

相关资源:数据结构—成绩单生成器

最新回复(0)