【项目志】基于vue2的仿去哪网移动端

最新推荐文章于 2024-01-29 19:06:56 发布
最新推荐文章于 2024-01-29 19:06:56 发布
阅读量533 收藏 1
点赞数
分类专栏： 项目杂记 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43681801/article/details/129779241
版权
该文详细介绍了基于vue2、vuex和axios构建的移动端项目，包括环境搭建、首页的轮播图、导航按钮、猜你喜欢和周末去哪玩等功能模块，以及城市选择页的搜索和城市列表功能，和景点详情页的设计。目前，部分功能如搜索、跳转仍有待完善。
摘要由CSDN通过智能技术生成

仿去哪网移动端

环境搭建和项目架构

vue-cli脚手架搭建
在这里插入图片描述

技术栈

vue2 + vuex + axios
插件：better-scroll、view-awasome-swiper

功能模块

首页

  • home-Header
    头部搜索框HomeHeader----包含一个后退按钮、一个搜索框、一个城市选择入口
    • 无法搜索、无法输入，但是原理同城市选择的搜索框
      在这里插入图片描述
  • home-swiper
    轮播图–view-awasome-swiper插件实现，
    • 可以左右拖拽，可以设置自动播放（loop:true）
      在这里插入图片描述
  • home-icons
    中部导航按钮，可以结合swiper实现多页滑动效果
    • 后台数据支持用axios，只有static中的内容才能被外部访问到
    • 显示正常，可左右拖拽，不能点击跳转
      在这里插入图片描述
  • home-recommend
    猜你喜欢板块，flex布局实现
    • 可点击跳转到景点详情页，数据有限，跳转的都是同一页
      在这里插入图片描述
  • home-weekend
    周末去哪玩板块
    • 目前显示正常，不能点击跳转
      在这里插入图片描述

城市选择页

  • cityHeader–头部标签，有返回首页按钮
    citysearch—头部搜索框

    • 可以实现按照汉字/字母搜索城市，搜索结果可以直接点击跳转
    • 左上角箭头可返回首页
      在这里插入图片描述

  • city-List----城市列表布局
    city-List列表布局，用于显示所有国内城市供选择，使用插件better-scroll可以实现上下拉弹动效果

    • 可以点击任意位置的城市标签进行城市切换
    • pc上可以拖动或者滚轮上下滑动列表
      在这里插入图片描述

  • city-alphabet----字母选择
    city-alphabet是其中还有一个字母选择列表，单独一个插件实现

    • 可以实现在字母表处拖拽到指定位置显示对应字母的城市列表首部
    • 可以单击指定字母跳转到对应字母的城市列表首部
      在这里插入图片描述

景点详情

  • Detail-banner—头部
    显示景点的名称、可以查看景点的一些展示图片

    • 可以点击图片部分进入图片展示页面，可左右滑动查看页面，点击黑色区域可退出
    • 右下角会显示可查看图片的数量，进入图片查看底部也会显示当前浏览图片和总数量
    • 左上角箭头可以返回首页
      在这里插入图片描述
      在这里插入图片描述

  • Detail-content–详情页具体内容
    显示一些关于景点的评价、攻略、位置、门票等信息

    • 目前所有区域均不能点击跳转到下一页
      在这里插入图片描述

源代码地址

项目源代码地址

方法小项目功能还有待完善
如果对你有帮助，可以给个star✨或点个赞的👍，谢谢支持😁🎈

mihu^_^
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发（应用中的几个页面简单实现）
仙魁XAN
06-28 1492
目录Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发（应用中的几个页面简单实现）一、简单介绍二、环境三、效果预览四、项目的页面结构五、项目主要插件六、项目实现过程七、router路由管理， store vuex 状态管理 说明八、几个性能优化点说明九、axios 获取服务端数据说明十、src/common 的共有 vue 十一、src/assets/styles 存放css 样式、常用的变量样式参数等 十二、该仿去哪儿网的演示项目源码下载Vue 开发的一些知识整理，方便后期遇到类似的问题
vue仿去哪儿网实践笔记
曹乐乐的博客
03-29 709
用git建立仓库和本地的联系 1、安装vue脚手架 cnpm install vue-cli -g 2、使用vue-cli初始化项目 vue init webpack my-project 3.安装项目依赖 cnpm i 4.查看初始化的项目 npm run dev 可以在config.js里修改是否自动打开浏览器 5.npm run build 生成本地打包文件，后在本地打开问题 6.目录介...
【vue】二、vue2仿去哪儿网app——首页开发
前端学习博客
02-22 670
文章目录二、vue2仿去哪儿网app——首页开发Ⅰ 页面结构Ⅱ 开发笔记及注意点1.公共样式抽取2.路径 --> 绝对路径3.用padding-bottom实现固定宽高比4.保证内容不超出父盒子5.axios 获取数据6.实现有分页效果的图标（icon）轮播区域Ⅲ bug解决1.vue-cli引入iconfont报错：2.vue-awsome-swiper修改轮播图pagination颜色问题3.1. vue轮播图插件 Vue-Awesome-Swiper3.2 npm发布包缺少.d.ts文件，VSC
【VUE】-使用Vue高仿最新版去哪儿网 涉及诸多常用知识点总结
老汉健身的博客
04-19 748
前言:花了近两个月时间研究ES6语法和VUE,然后手写了去哪儿网最新版的页面,至今也算是初出茅庐,为了避免遗忘,赶紧在此总结学到的所有比较重要常用的知识点. 项目地址:https://github.com/laohanjianshen/qunar 部分截图: 更多的细节图就不一一贴了,整个项目也几乎涉及到了VUE中常用的各种知识点,入门是绝对够了. 目录 1.同步组件&异...
vue2 构建一个旅游类WebApp
weixin_34410662的博客
08-19 265
前言 从看了慕课上面黄易老师的饿了么课程后，总感觉学了VUE之后要做点什么，趁着热情兴趣还在，自己也用VUE全家桶写了一个旅游类的APP,为什么选择做旅游类的呢？？呵呵，我不会告诉你虽然很多地方都没去，但是可以意淫啊啊啊啊。 地址 github地址喜欢的话 star一下，举手之劳是美德 ，哈哈。如有问题 欢迎issue 项目描述 前端部分...
基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目软件源码.zip
05-05
基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目软件源码，较为简单的基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目， 有基本的页面和假数据, 适合作为电商项目的启动模板或者用作...
vue项目之仿企业微信移动端前端代码
06-02
该项目为vue2脚手架项目，无后端。主要是仿企业微信移动端的前端界面。效果页面我会在博客中说明。看清楚了在下载。 技术栈：vue2+vue-router+vant 启动环境：node+vue-cli 运行命令：npm install npm run serve
基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目
03-05
较为简单的基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目。 有基本的页面和假数据, 适合作为电商项目的启动模板或者用作学生毕设学习使用。
基于vant, vue, axios, vuex的移动端项目开发仿小米商场移动端项目软件源代码.zip
最新发布
05-27
基于vant, vue, axios, vuex的移动端项目开发,仿小米商场移动端项目软件源代码，较为简单的基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目， 有基本的页面和假数据, 适合作为电商项目的启动模板或者...
Vue2开发移动端的模板
03-18
这个"Vue2开发移动端的模板"是一个用于快速启动移动端项目的基础结构，它包含了必要的配置和文件，帮助开发者迅速搭建开发环境，节省时间并提高开发效率。 模板通常包括以下部分： 1. **项目结构**：Vue2项目一般...
Vue2实现去哪儿网
ZZY192921533的博客
04-10 106
VUE2实现去哪儿网
vue项目实战（二）- 旅游网站城市列表页面开发
高安博客
11-24 802
一、城市选页-路由配置 打开router目录下的index.js，写入配置： import City from '@/pages/city/city' export default new Router({ routes: [{ path: '/', name: 'Home', component: Home }, { path: '/city', name: 'City', component: City }] }) 在pages...
【vue】四、vue2仿去哪儿网app——景点详情页面
前端学习博客
02-22 662
文章目录四、vue2仿去哪儿网app——景点详情页面Ⅰ项目结构Ⅱ 开发笔记及注意点1.实现点击banner图，弹出一个画廊组件（图片的轮播）2.实现页面滑动至离顶部60时，出现Header组件3.实现Header组件的渐隐渐现动画效果4.对全局事件的解绑 四、vue2仿去哪儿网app——景点详情页面 Ⅰ项目结构 景点详情页 header部分 画廊页面 详情页 Ⅱ 开发笔记及注意点 1.实现点击banner图，弹出一个画廊组件（图片的轮播） 设置v-show来决定画廊组件是否出现，并且绑定图片的点击事
Vue+ElementUI+nodejs四川成都旅游景区预约网站680d9
qq_840612233的博客
01-29 1016
利用电脑网络的这些便利，发展一套成都旅游网，将会给用户及旅行社带来更大的效益，而在美食预约效能上，也必然会有很大的方便！成都旅游网的用户是管理员和用户，为了满足现代社会对环保和节约的需要，将传统的纸质文档通过计算机输入计算机并以电子文档的方式显示出来。因此，要建立一个简单、直观的查询渠道，并设定特定的存取权限，以保证工作的顺畅和高效。本篇论文对成都旅游网的需求分析、功能设计、系统设计进行了较为详尽的阐述，并对系统的整体设计进行了阐述，并对各功能的实现和主要功能进行了说明，并附上了相应的操作界面图。
Vue实现仿去哪网详情手机模块静态网页
写bug的程序鱼
07-07 778
Vue实现去哪网详情手机模块静态网页如下：img图片如下👇： 代码实例👇： html+vue部分👇：
VUE去哪儿网仿写
qq_35788269的博客
06-30 2471
今天。博主带来的是一个VUE项目的实战，去哪儿网移动端仿写，，其中包括了，组件传值，VUE-Router，VUEX，AJAX，以及swiper3插件实现轮播效果，由于代码比较庞大这里就不贴了，文章末尾博主会把代码百度云连接放上，欢迎下载关注。好了，我们来看下效果吧：主要是这四个页面，从上到下依次编号为1234，简单说下效果：1、页面1中点击右上角北京可以切换到城市选择页面2 ，在页面2中选择了城市...
Vue去哪网学习笔记(1)
EmotionComputer
07-17 1159
1. Vue中每一个组件就是一个vue实例。 2. 生命周期函数就是Vue实例在某一个时间点自动执行的函数。 注意：Vue的生命周期函数写在Vue实例里，而不是methods里面。 3.模板语法 1. 插值表达式： {{ }} 2. v-text <div v-text='name'></div> 等价于 {{name}} 其中na...
vue项目--仿写去哪儿网app--遇到的问题及说明总结
斗师——Ace
10-06 3038
添加小程序，兑换各种视频教程/数据资源。 1. 移动端开发中的1px边框问题，由于在不同屏幕上，可能会使得1px实际在移动端显示不是1px,怎么解决? 2. 移动端click点击事件，会延迟300ms,怎么解决？ 解决：引入第三方包,解决移动端click事件延迟300ms； npm install fastclick --save; 在main.js中写如下代码 ...
一.Vue2.5开发去哪儿网app首页④——图标区域页面布局
风里有诗句哈的博客
02-17 837
同样，在码云中新建一个index-icons分支，接下来的开发都会在这个分支上 git转至index-icons分支三部曲 git pull git checkout index-icons git status 在components下新建一个Icons组件，导入到Home组件中，Icons组件内容： icons使用浮动布局，8个icon自动分布2行，icon内图片和描述使用子绝父相 ...
基于vue的仿网易云音乐移动端研究现状
05-12
随着移动互联网的不断发展，人们对音乐的需求也越来越高。网易云音乐作为国内最受欢迎的音乐APP之一，其移动端的用户体验得到了广泛的认可和好评。在此背景下，基于vue的仿网易云音乐移动端研究也逐渐成为了一个重要的研究领域。 目前，基于vue的仿网易云音乐移动端研究的发展呈现出了以下几个趋势： 一是技术不断升级。由于vue技术本身的优势，越来越多的研究者开始使用vue搭建移动端应用。同时，随着vue技术的不断更新，其在模板语法、数据绑定、组件化等方面的改进也为仿网易云音乐移动端的开发提供了更好的支持。 二是功能越来越丰富。仿网易云音乐移动端的目的是为了提供用户体验类似于网易云音乐的功能，因此除了基本的播放、收藏、搜索等功能外，越来越多的研究者开始研究更加细致、实用的功能。例如，一些研究者在仿网易云音乐中加入了“歌曲推荐”、“语音识别”等功能，旨在提高用户的使用体验。 三是美观度越来越高。仿网易云音乐移动端的视觉效果往往是用户接触的第一印象，因此美观度也成为了越来越多研究者关注的点。一些研究者在仿网易云音乐中加入了更丰富的音乐封面、动态背景等视觉效果，旨在提高应用的用户粘性。 总体而言，基于vue的仿网易云音乐移动端研究已经进入了一个高速发展期，未来也将继续持续发展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值