BAEBAE996

摘要： 在上一篇文章中，我们介绍了vuex的基本概念和使用方法 当需要共享的数据比较简单且都是同步操作时，组件可以跳过Action，直接用 commit 方法调用Mutations 同时我们也可以借助两个辅助函数简化我们的代码 mapState和mapMutations可以接收数组或者对象作为参数 将sto 阅读全文

摘要： 一、vuex的概念和作用 vuex是一种专门为vue应用程序开发的状态管理模式 核心是"store"（一个公共管理的仓库）即下图虚线框内的部分 上图呈现了vue组件对状态进行读写的完整事件流： 当组件需要获取状态时，可以直接从State中获取 当组件需要改变状态时： 1- 通过dispatch方法调 阅读全文

摘要： 一、背景需求 在页面上渲染一个多级列表的时候，数据往往也具有多个层级 例如：数组的每个元素都是一个对象，对象中的value可能是一个数组 { "ret": true, "data": { "sightName": "大连圣亚海洋世界(AAAA景区)", "bannerImg": "", "categ 阅读全文

摘要： 一、背景需求 在页面中，我们希望实现以下功能： 进入页面时，顶部左侧显示返回按钮 当页面向下滚动一定距离时，在可视区域顶部固定“Header”一栏 效果如下： 二、实现思路 1、静态布局 在页面加载完成后、开始滚动前： 将返回按钮所在的div 设置绝对定位，用标志位showAbs设置v-show / 阅读全文

摘要： 一、简介 keep-alive是vue的内置组件 当我们使用keep-alive包裹动态组件时，会缓存不活动的组件实例 简而言之，就是将组件(页面)的相关数据和状态载入缓存，防止在页面切换的时候重复渲染DOM 更详细的介绍请参考vue的官方API文档 二、使用方法 在项目根组件中，如果我们用keep 阅读全文

摘要： 一、背景 在上一篇文章中，我们介绍了如何实现城市列表随导航条滚动的功能 当用户不断拖动导航条的时候，会频繁地触发功能函数 这样会造成资源的浪费、降低页面运行的速度 因此，我们需要通过函数防抖(debounce)来解决这个问题 二、函数防抖的概念 函数防抖，即限制一个函数在一定时间内只能执行1次 实现 阅读全文

摘要： 一、背景需求 在 上一篇文章中，我们实现了点击字母->定位到相应区域的功能 接下来，我们要实现城市列表随导航条滚动而滚动的功能 页面静态布局如下： 二、移动端 touch事件的基础知识 常见的触摸事件包括： touchstart、touchmove、touchend touch对象代表一个触点，每个 阅读全文

摘要： 一、背景需求 在城市列表页面中，我们希望通过导航条完成以下2项功能： 1、 点击字母，定位到以该字母开头的城市区域 2、 在垂直方向拖动导航条，根据鼠标（手指）所在的字母 定位到相应区域 页面的静态布局如下图： 二、兄弟组件的数据传递 字母导航条所在的子组件为 Alphabet，城市列表所在的子组件 阅读全文

摘要： 一、背景需求 BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件 它的核心灵感来自于 iscroll 的实现 它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化 在一个以长列表为主要内容的vue 阅读全文

摘要： 一、背景需求 在一个不涉及后端开发的vue项目中，我们需要本地数据对页面进行动态渲染 而对于本地服务器来说，它只能访问static目录下的数据 这意味着我们需要一个机制，帮助我们将 对api目录的请求 转发到static目录下 二、实现方式 旧版本 在3.x版本的vue-cli中，webpack-d 阅读全文