为了账号安全,请及时绑定邮箱和手机立即绑定

【学习打卡】第7天 JS的动态属性,收藏未收藏的切换,初始化收藏状态

课程名称:微信小程序入门与实战(全新版)

课程章节: JS的动态属性,收藏未收藏的切换,初始化收藏状态

主讲老师:7七月

课程内容:

今天学习的内容包括:JS的动态属性,文章收藏状态的切换,初始化收藏状态


 访问对象中的属性

const obj = { flag:1 }
修改对象属性值 flag 的方法:
方法一,确定属性名:obj.flag = 2 
方法二,动态访问属性,不确定属性名,而是通过参数形式传入:obj[flag] = 2

文章收藏状态的切换

/**     * 页面的初始数据     */    
data: {        
    postData: {},        
    collected: false,        
    _pid: null   
},

wxml 页面点击触发 collected 为 true
/**     * 收藏页面     */   
onCollect(event) {        
    const postsCollected = {};        
    // 动态访问属性,不确定属性名,而是通过参数形式传入        
    postsCollected[this.data._pid] = true;        
    
    this.setData({           
        collected: true        
    })   
    
    wx.getStorageSync('posts_collected', postsCollected)     
},


收藏功能整体思路:

先通过点击事件,获取到文章的 id,定义一个空对象用来存储布尔值,然后将这个布尔值和 id 存在缓存里。
再通过 onLoad 生命周期函数监听页面加载,把获取的缓存存进全局变量 data 供点击事件使用。接着把在 data 里获取到的缓存和图标的布尔值进行取反。

 

课程收获:

今天算是把文章收藏功能学完了,不过还有许多细节要慢慢琢磨,感觉自己的 JavaScript 基础还是比较薄弱,要多加练习。

今日课程学习时间大约花费 15 分钟,今天看了四次视频,回头再慢慢消化。

https://img1.sycdn.imooc.com//62f283770001a6af19180942.jpg

https://img1.sycdn.imooc.com//62f2837800017fb819110920.jpg


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消