环境搭建和项目架构
vue-cli脚手架搭建
技术栈
vue2 + vuex + axios
插件:better-scroll、view-awasome-swiper
功能模块
首页
- home-Header
头部搜索框HomeHeader----包含一个后退按钮、一个搜索框、一个城市选择入口- 无法搜索、无法输入,但是原理同城市选择的搜索框
- 无法搜索、无法输入,但是原理同城市选择的搜索框
- home-swiper
轮播图–view-awasome-swiper插件实现,- 可以左右拖拽,可以设置自动播放(loop:true)
- 可以左右拖拽,可以设置自动播放(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✨或点个赞的👍,谢谢支持😁🎈