【学习打卡】第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 分钟,今天看了四次视频,回头再慢慢消化。
这篇关于【学习打卡】第7天 JS的动态属性,收藏未收藏的切换,初始化收藏状态的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-16Vue3资料:新手入门必读教程
- 2024-11-16Vue3资料:新手入门全面指南
- 2024-11-16Vue资料:新手入门完全指南
- 2024-11-16Vue项目实战:新手入门指南
- 2024-11-16React Hooks之useEffect案例详解
- 2024-11-16useRef案例详解:React中的useRef使用教程
- 2024-11-16React Hooks之useState案例详解
- 2024-11-16Vue入门指南:从零开始搭建第一个Vue项目
- 2024-11-16Vue3学习:新手入门教程与实践指南
- 2024-11-16Vue3学习:从入门到初级实战教程