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

2022/8/11 4:22:50

本文主要是介绍【学习打卡】第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




这篇关于【学习打卡】第7天 JS的动态属性,收藏未收藏的切换,初始化收藏状态的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程