2024年最新学习笔记 （4） uni-app 下拉刷新(1)，2024年最新2024阿里手淘前端面试题目

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

监听下拉刷新

通过onPullDownRefresh可以监听到下拉刷新的动作

export default {

data () {

return {

arr: [‘前端’,‘java’,‘ui’,‘大数据’]

}

},

methods: {

startPull () {

uni.startPullDownRefresh()

}

},

onPullDownRefresh () {

console.log(‘触发下拉刷新了’)

}

}

关闭下拉刷新

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

案例演示

<button type=“primary” @click=“startPull”>开启下拉刷新

杭州学科

{{item}}

上拉加载

通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px

通过onReachBottom监听到触底的行为

数据缓存

uni.setStorage

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

uni.setStorageSync

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

<button type=“primary” @click=“setStor”>存储数据

uni.getStorageSync

从本地缓存中同步获取指定 key 对应的内容。

代码演示

<button type=“primary” @click=“getStorage”>获取数据

uni.removeStorageSync

从本地缓存中同步移除指定 key。

代码演示

<button type=“primary” @click=“removeStorage”>删除数据

条件注释实现跨段兼容

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

**写法：**以 #ifdef 加平台标识 开头，以 #endif 结尾。

平台标识

| 值 | 平台 | 参考文档 |

| — | — | — |

| APP-PLUS | 5+App | HTML5+ 规范 |

| H5 | H5 | |

| MP-WEIXIN | 微信小程序 | 微信小程序 |

| MP-ALIPAY | 支付宝小程序 | 支付宝小程序 |

| MP-BAIDU | 百度小程序 | 百度小程序 |

| MP-TOUTIAO | 头条小程序 | 头条小程序 |

| MP-QQ | QQ小程序 | （目前仅cli版支持） |

| MP | 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序 | |

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-lvGHYDmW-1715750360071)]

[外链图片转存中…(img-8ORuezhC-1715750360072)]