慕课网仿去哪儿项目笔记--（三）-城市页面制作
一，头部区域的制作
新建git分支，然后创建router和对应的city组件
利用声明式导航，实现页面的跳转功能
二，实现基本页面的制作：
三，使用Better-Scroll的使用和字母表布局
https://github.com/ustbhuangyi/better-scroll
安装：
npm install @better-scroll/core
实现的效果：
四，城市页面的数据渲染
五，接下来要实现典型的列表联动
左右两个列表，左边点击右边跳到相应位置，右边滚动左边相应位置也高亮显示；这就是典型的列表联动。
第一步：先在字母的组件中定义事件，点击字母时可以取得字母的内容：
第二步，利用vuex把这个内容存到store中：
调用vuex中的函数，把字母传入
第三步：在list组件中导入这个字母。然后使用
第四步：在list组件中监听这个字母的变化：
这样，点击字母就会实现跳转：
六，实现滑动字母，左侧页面随之跳转
第一步：在滑动区域上定义滑动的事件
原理就是上图这样，计算高度，然后计算出滑动了几个字母，传给vuex中的数据。
第二步，将滑动了几个字母传给vuex,并在list的组件中调用
第三步，优化的两个小东西
1，把初始高度的获取放置在外面，这样就可以直接使用，而不是每次函数执行就又去获取计算一次。
2，节流的优化，让每隔15毫秒去执行滑动函数，而不是一直执行
七，实现搜索功能
第一步：实现搜索时，会出现对应的数据。
第二步，list组件中点击对应的城市，当前城市就会切换成这个，并且返回页面顶部
因为当前城市的数据信息好几个组件都需要使用到，所以需要存放在vuex中：
第三步，实现点击搜索到的城市，当前城市变化，然后搜索内容消失
因为是兄弟组件间传值，所以可以采用emit和emit和emit和on的方法：
第四步：需要把城市选择页面的数据共享给主页的城市上：
第五步，使用localstorage来保存当前页面选择好的城市
主要还是因为，我们的数据在页面一刷新，就会被重置，所以才会需要使用localstorage来保存当前页面选择好的城市
但是为了避免某些用户的浏览器关闭了导致程序无法运行，改写成：
八，将vuex的代码模块化
然后这个页面的内容就完成了，推送到码云上就可以。
慕课网仿去哪儿项目笔记--（三）-城市页面制作相关推荐
- UNIAPP实战项目笔记45 订单页面布局完成和数据渲染
UNIAPP实战项目笔记45 订单页面布局完成和数据渲染 实际案例图片 订单页面 具体内容图片自己替换哈,随便找了个图片的做示例 具体位置见目录结构 通过 模拟数据list 来实现数据渲染 完善布局页 ...
- Docker笔记三 Docker镜像制作
Docker笔记三 Docker镜像制作 1.Docker镜像制作方法: docker commit 保存当前container的状态到镜像,生成p_w_picpath. docker build 利 ...
- UNIAPP实战项目笔记43 购物车页面修改收货地址和修改默认地址
UNIAPP实战项目笔记43 购物车页面修改收货地址和修改默认地址 实际案例图片 修改收货地址和修改默认地址页面布局和功能 具体内容图片自己替换哈,随便找了个图片的做示例 用到了vuex的状态机,具体 ...
- 慕课网 前端JS面试技巧 笔记
前言 关于面试 前端水平的三个层次 基层工程师-基础知识 高级工程师-项目经验 架构师- 解决方案 几个面试题 题目很多,做具有代表的题目,举一反三 js 中使用 typeof 能得到哪些类型 (== ...
- 五子棋的实现“慕课网五子连珠的笔记”
慕课网的视频 首先创建了一个类,这个类继承了View,去实现这个类的构造方法,实现其两个参数的构造方法,老师建议自己写的过程中对这些构造方法都进行实现. 在布局文件中对这个类进行使用,注意是包名.宽高 ...
- 慕课网--网上商城mmall项目---部署手记
1.先在服务器部署好java,maven,nodejs环境. 2.然后安装nginx,tomcat,vsftp,git(一般默认会有)等软件 , 其中vsftp安装过程参照我上一篇文章. 3.在慕课网 ...
- react 网易云音乐实战项目笔记
0.项目规范 一.路由相关 npm i react-router-dom npm i react-router-config // 用于配置路由映射的关系数组 1. 路由重定向 访问 /路径 => ...
- 慕课网初识python_初识Python笔记
初识Python 基本数据类型 基本数据类型: 整数 十六进制用0x前缀和0-9,a-f表示 浮点数 整数运算永远是精确的,而浮点数运算则可能会有四舍五入的误差 字符串 以''或"" ...
- cocos2dx打飞机项目笔记三：HeroLayer类和坐标系
HeroLayer类主要是处理hero的一些相关东西,以及调用bulletLayer的一些方法,因为子弹是附属于hero的~~ HeroLayer 类的成员如下: 1 class HeroLayer ...
- 树莓派魔镜项目——笔记三 第三方库
介绍几个第三方模块 由于部分module使用了api,则可能涉及以下情况: 1:直接可用的 2:需要科学上网的 3:需要申请api key的 主要修改mouts/config/config.js文件, ...
最新文章
- ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course
- 【ACM】 multiset 的 一些应用
- “GAN之父”：当初为了深度学习买GPU，现在后悔没多挖点比特币
- 全球缺芯的后果来了——网站推广之下小米宣布部分电视产品型号要涨价！
- LNMP构架概述及相关服务的搭建(附带搭建论坛实验)
- android画布设置最外层,Android自定义View高级(三)-Canvas之画布操作
- 【JSP】JSP与JavaBean的关系
- Nginx学习之十-超时管理（定时器事件）
- 关于js数组的六种算法---水桶排序，冒泡排序，选择排序，快速排序，插入排序，希尔排序的理解。...
- 好好学习 天天编程—C语言之我的第一个hello world（二）
- 【面经】算法岗面试复盘：阿里，百度，作业帮，华为
- 使用ASP.NET快速开发平台，获得表单源码，用珍藏资料换来的代码生成器！
- php+ioncube',windows下php安装ionCube
- Java 自定义Excel数据排序
- 关于SQLite创建视图
- 书籍扫描图像几何畸变校正
- 极客时间和极客学院_极客需要告诉我们的父母有关安全可靠地在线购物的信息
- ping 命令的基本使用
- android view.isshown,android View.isShown() 和 getVisibility() 的区别
- 段码液晶屏怎么焊接？