基本信息

案例ID:126976

技术顾问:阿荣 - 4年经验 - 滴滴

联系沟通

微信扫码,建群沟通

项目名称:去海外网 移动端

所属行业:文化娱乐 - 旅游

->查看更多案例

案例介绍

1.使用vue-cli 脚手架搭建底层目录,搭配 vuex 合理管理数据状态及 Vant-Ui 构建 ui 层。
2.负责主页,数据列表页以及详情页等。
A.主页
a)进入页面首屏加载利用 Vue Lazy Component、优先加载首屏可见模块,其余不可见模块懒加载(Lazy load、ExtractTextPlugin),即将可见时加载。
b)利用 vant-swipe 构建 swiper(mapActions 派发 swipe 函数,mapState 获取数据), 以及 lazy-loder 对 swipe 图片懒加载(src 替换为 v-lazy)
c)table 切换:对页面进行数据的更新与迭代(列表(复用组件),当前选中的状态会存储到 vuex 的 state 中, 点击会进行判断,避免重复请求);
d)上拉页面:滚动小于或等于指定高度(el.scrollHeight-el.scrollTop-el.clientHeight<=50),axios 请求渲染;
e)点击内容,跳转到关于此内容的详情页(子路由跳转、query 携带路由参数),请求渲染响应数据。点击上方 logo(this.$route.push)返回主页面
B.数据列表页(海外好房,移民,留学,游学)
a)首页部分内容,跳转到数据列表页(通过 vue-router,动态路由传参,携带内容 id),根据点击内容不同, 渲染不同的数据列表(如详情、国家移民、简介)
b)每次点击筛选模块,把点击内容存放对象中,每次都发送 axios 请求,后端匹配相应的数据, 返回数据渲染页面,实现筛选功能,下拉页面:对页面进行数据的加载;
C.详情页:‘海外好房’利用 vant-swipe 构建 swiper,下方布局采用 table 切换(动画效果利用 transfrom, transition 以及把 table 列表 sticky 定位)
3.根据接口文档,通过mockjs 模拟数据,axios 发送请求与 axios-mock-adapter 拦截,proxy 实现跨域请求。

相似案例推荐

其他人才的相似案例推荐

  • 景区策划方案及视频制作剪辑

    景区策划方案及视频制作剪辑

    该内容为某些景区活动的整体策划,我负责整个项目的方案策划安排

  • 乐养云

    乐养云

    乐养云云平台采用了传感网络、云计算、互联网医疗等先进技术和理

  • 虚拟地图旅游(PC/APP/H5)

    虚拟地图旅游(PC/APP/H5)

    H5 版本,pc版及移动版,温州vr虚拟游,GPS地图导览,

  • 生态绥滨

    生态绥滨

    1.酒店地址标记,针对具体的酒店,在后台使用百度地图api,

  • uzou网

    uzou网

    技 术 栈:jQuery 项目描述:此项目对网页布局有一

  • HelloMap

    HelloMap

    HelloMap 是一款可多人协作的计划工具,支持多人同地异

  • 黄山旅游网站

    黄山旅游网站

    此项目的目的是搭建一个基于java的黄山旅游网站。本网站采用

  • 安徽省旅游集团微信平台

    安徽省旅游集团微信平台

    安徽省旅游集团包含皖旅要闻,掌上皖旅,皖旅印象。皖旅要闻包含

  • 东方盐湖城智慧旅游

    东方盐湖城智慧旅游

    这是一款为公司旗下的景区做的智慧旅游项目,项目包括订票、酒店

  • Vue开发WebAPP

    Vue开发WebAPP

    个人练手项目,仿照移动版去哪网,实现首页、城市列表、列表选择

  • 方特旅游

    方特旅游

    负责地图覆盖图层以及标注、地理围栏等功能,实现定制化电子游园

  • 维拉度假

    维拉度假

    维拉度假,是一家融合旅游度假、房地产、线下传统服务业、互联网

发布任务

企业点击发布任务,工程师会在任务下报名,招聘专员也会在1小时内与您联系,1小时内精准确定人才

微信接收人才推送

关注猿急送微信平台,接收实时人才推送

接收人才推送
联系需求方端客服
联系需求方端客服