游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    客服电话

    020-85534346

    电子邮件

    81058337@qq.com
  • 码云社APP

    随时掌握码云社动态

  • 扫描二维码

    关注砺锋微信公众号

「开源-前端」vue全家桶制作一个精致的仿美团项目

发布时期:2019-4-3 14:10
阅读:1408 回复:20

一、项目展示:注意:如果gif动态图看不了,麻烦大家点击github美团项目中mt-app/src/assets/美团.gif便可以观看!本项目很适合vue初学者,如果业务逻辑看不懂,很欢迎一起讨论!源码地址在最后,欢迎star和fork如果 ...

一、项目展示:

「开源-前端」vue全家桶制作一个精致的仿美团项目

注意:如果gif动态图看不了,麻烦大家点击github美团项目中mt-app/src/assets/美团.gif便可以观看!

本项目很适合vue初学者,如果业务逻辑看不懂,很欢迎一起讨论!

源码地址在最后,欢迎 star 和 fork

如果对你有些许帮助,不妨点赞、关注我一下啊

二、项目涉及到技术栈:

  • vue全家桶:Vue、Vue-router、Vue-cli等
  • 组件化:单Vue文件
  • 模块化:ES6 Module
  • 第三方模块:better-scroll axios等
  • 基础开发环境和包管理:Node、npm
  • 构建工具:webpack
  • 编辑器:webstrom

三、项目主要功能

一言而蔽之:一款集点菜、用户评价和商家信息为一体的移动端点餐APP

1.点餐页面

点选商品后自动添加到购物车,并计算好总价,在商品列表、购物车列表和商品详情页都可以随意增减数目,此外左侧商品分类和右侧的商品相互关联,通过better-scroll插件滑动商品列表时,相应的商品分类也会跟着跳转。

2.用户评价页面

主要包括一个TAB栏,包括三部分:全部、有图和评价三个模块

3.商家信息页面

主要介绍一些商家基本信息,可以通过better-scroll插件,进行左右滑动图片

四、项目难点

该项目业务逻辑主要集中在点餐模块,而点餐模块中难点便是如何实现商品列表滑动,以及右侧商品分类和左侧商品列表如何联动?

「开源-前端」vue全家桶制作一个精致的仿美团项目

首先要实现商品列表的滑动,就需要用到一个better-scroll插件,better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。

  • 安装better-scroll npm install better-scroll --save
  • 在Good.vue文件中script引入import BScroll from 'better-scroll'

这些准备工作做好后,实现左右两边列表联动,总结起来有以下四个步骤:

1. 计算商品分类的区间高度

//template部分











  • {{item.name}}





    • ......
      //JS部分
      methods:{
      calculateHeight() { // 计算分类的区间总高度(包括专场和所有具体分类的总高)
      let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
      let height = 0
      this.listHeight.push(height)
      for (let i = 0; i < foodlist.length; i++) {
      let item = foodlist[i]
      height += item.clientHeight // 累加
      this.listHeight.push(height)
      }
      console.log(this.listHeight)//[0, 43, 1231, 2401, 3589, 4451, 6121, 7656, 8497, 9344, 10080]
      },
      initScroll() {
      this.menuScroll = new BScroll(this.$refs.menuScroll, { //实例化
      click: true //点击事件才能生效
      })
      this.foodScroll = new BScroll(this.$refs.foodScroll, {
      probeType: 3,
      click: true
      })
      },
      created() {
      fetch("/api/goods")
      .then(res => res.json())
      .then(response => {
      if (response.code == 0) {
      this.container = response.data.container_operation_source
      this.goods = response.data.food_spu_tags
      this.poiInfo = response.data.poi_info
      this.$nextTick(() => { //在created中数据虽已初始化,但dom未生成,页面还没显示,要使用回调函数,确保DOM已经更新
      this.initScroll() // 执行滚动方法
      this.calculateHeight() //调用计算分类区间高度的方法
      })
      }
      })
      }

2. 监听滚动的位置

initScroll() {
this.menuScroll = new BScroll(this.$refs.menuScroll)
this.foodScroll = new BScroll(this.$refs.foodScroll, {
probeType: 3,//在屏幕滑动的过程中实时派发 scroll 事件
click:true//点击事件才能生效
})
//foodScroll监听事件
this.foodScroll.on("scroll", (pos) => {
this.scrollY = Math.abs(pos.y)
console.log(this.scrollY)
})
}

3. 根据滚动位置确认下标,与左侧对应

computed:{
currentIndex(){
for(let i = 0; i < this.listHeight.length; i++){
let height1 = this.listHeight[i]
let height2 = this.listHeight[i+1] // 获取商品区间的范围
if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)){
return i; // 是否在上述区间中
}
}
return 0
}

4. 通过下标实现点击左侧,滚动右侧

五、项目总结

  • vue数据和视图的分离,以数据驱动视图,只关心数据变化,DOM操作被封装,在实际开发过程中大大提高了效率。
  • Vue的组件化功能可谓是它的一大亮点,通过将页面上某一组件的html、CSS、JS代码放入一个.vue的文件中进行管理可以大大提高代码的维护性。
  • 项目中未做移动端适配,在不同屏幕手机上打开,可能用户体验会差些

源码地址:https://github.com/ljianshu/mt-app

飛奔的青蛙(未知职业)-本文作者
这个人很懒,什么也没有留下。
1408 20 2019-4-3 14:10
该文章已有20人参与评论

请发表评论

全部评论

查看全部评论>>

扫一扫关注官方微信号

一手信息资讯权掌握尽在码云社

滚动新闻
CODESEEDING(码云社)一家致力于程序员成长、以内容为核心、以提问为引导的多元化成长社区。我们在线上为技术爱好者提供了一个优质的交流氛围环境,在线下同样和众多高校联合开办了技术沙龙品牌。
020-85534346
关注我们
  • 访问移动H5版
  • 官方微信公众号

码云社 - CODESEEDING 2.0© 2018-2019 码云社. TOOBUG ( 粤ICP备16114193号-3 )