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

qq_47811744

关注

已于 2022-04-07 17:14:33 修改 · 3k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

微信小程序云开发之收藏文章功能的简单实现简单实现收藏文章并展示在收藏界面阅读详情

自己刚接触小程序，在网上找了很多的收藏的代码，但是发现都点击收藏后，退出去再回来已收藏又变成未收藏状态，然后自己就改改改拼拼凑凑终于改了出来侵删就是代码有些复杂感觉可以更简便但是我还没有找到方法在这里记录一下有大佬也可以指点一下

.wxml代码

   <view  class="save" >

    <text class="saveText">{{isClick?'已收藏':'收藏'}}</text>

    <image style="height: 50rpx; padding: 4rpx;" mode="heightFix" 
    src="{{isClick?'https://636c-cloud1-2gz5yzstf4bf5a3e-1309497881.tcb.qcloud.la/%E8%81%9A%E6%94%B6%E8%97%8Fgift.png?sign=f791e9c1b27556e4edbfb9dab7ae8fa8&t=1649143160':'https://636c-cloud1-2gz5yzstf4bf5a3e-1309497881.tcb.qcloud.la/%E8%81%9A%E6%94%B6%E8%97%8F%20(1).png?sign=06b33d1e2e959ece67f398aac815b110&t=1649143139'}}" bindtap="haveSave" ></image>

   </view>

.js代码

 data: {

        job: [],

        job2:[],

        id: '',

        isClick: false,

        jobStorage: [],

        jobId: ''

    },

haveSave(e) {

        let jobData = this.data.jobStorage;

        let truejobDat=this.data.job2;

        this.setData({job2:wx.getStorageSync('jobData')})

        for (var i =0; i<(this.data.job2.length); i++) {

          if (this.data.job2[i].saved ==true){

            jobData.push({

                jobid: this.data.job2[i].jobid,

                id: this.data.job2[i].id,

                saved:this.data.job2[i].saved})

          }

        }

        if (!this.data.isClick == true) {

         jobData.push({

         jobid: jobData.length,

         id: this.data.id,

         saved:true

         })

        wx.setStorageSync('jobData', jobData);//设置缓存

        wx.showToast({

        title: '已收藏',

         });

        } 

        else {

            console.log(jobData)

            for (var i =0; i<(jobData.length); i++) {

                if (jobData[i].id != this.options.index){

                   truejobDat.push({

                       jobid: jobData[i].jobid,

                       id: jobData[i].id,

                       saved:jobData[i].saved })

                     }

            }

         wx.showToast({

         title: '已取消收藏',

         });

        wx.setStorageSync('jobData', truejobDat);

        } 

        this.setData({

         isClick: !this.data.isClick

        })

        },

 onLoad: function (options) {

 let detailStorage  = wx.getStorageSync('jobData')

    console.log(wx.getStorageSync('jobData'))

    for (var i =0; i<(detailStorage.length); i++) {

        if (detailStorage[i].id==options.index) {

            if (detailStorage[i].saved){

                this.setData({isClick: true })

              }

        } }

}，

结果：