* 生命周期函数--监听页面加载 * 页面上拉触底事件的处理函数

每次写文章，总会感受到很多情绪。面对成功，我们总是抱着很高的期望，总是在不耐烦的时候想要得到胜利的果实。但每一次成功都不会轻易来到我们身边。几乎每一次，我们都需要付出极大的耐心和勤奋，甚至像偏执狂一样坚持愚蠢。自从小程序推出后，我就开始进军这个市场。不是因为他受欢迎，而是因为他对学习的兴趣。他总是想探索新知识。正是有了这种动力，我才能坚持下去。我上一篇文章《滴滴一夏，小程序专车来了》发表已经半个月了。我交了很多好朋友。他们乐观、开朗、机智。用你最简单的热情去对待别人。他们毫不犹豫地为我的招聘增色，鼓励和修正我。同时，我也要感谢老师给了我面试的机会，感谢他在穆课上给了我精彩的课程。回到正题，今天给大家带来的是美团外卖微信小程序，它是基于mpvue开发的。因为mpvue才推出三个月，所以我会详细讲解每一个细节，希望对正在mpvue上奋斗的你有所帮助。

学习如山。人们沿着不同的道路爬山，分享他们看到的风景。你可能看不到别人看到的风景，感受不到别人的心情。只有自己一个人去爬山，才能看到不一样的风景，体会得更深。因此，这个建议必须付诸实施。

• 3、在根目录的main.js下封装一个getList方法.用到请求数据的页面直接调用这个方法即可。提高代码复用率

封装好了数据的请求，我们的项目就实现了一大半了。接下来就是如何利用这些数据来填充我们的页面完成交互。

接下来我将会一一介绍在mpvue中如何实现定位，位置搜索，上拉加载下拉刷新，物品之间的二级联动。让我们打起精神，一起focus下面的知识点。

mpvue定位及位置搜索

mpvue中定位及位置搜索跟小程序类似，大家可以先看看我上篇文章，那里又详细的地址解析，逆地址解析，关键词搜索等。

官方拷贝下来的js放在utils下,这里要注意的是一定要将他的输出更改为

mpvue上拉加载下拉刷新

mpvue中实现二级联动

• 1 左到右:通过点击左侧滑栏的某一项，获取到该元素携带的 id ，然后动态传给右侧滑栏的 scroll-into-view ，从而实现右侧滑栏对应的该元素运动置顶。
• 2 右到左:通过计算整个右侧滑栏滚动上去的高度 与右侧滑栏中每一个分类距顶部的距离做比对，获取到该滚动置顶的分类的 index 。然后用获取到的 index 乘以左侧滑栏中某一项的高度，动态赋值给左侧滑栏内的 scrollTop ，控制左侧滑栏的联动。

做完一个项目并不难，但做好一个项目却要经过无数次的思考。其中之一就是看文档，所谓书读百变，其义自现。的确，当你一遍又一遍的看文档后你会发现你写起来非常的顺手，用到即来。没事可以点击vue文档多看看。

什么是组件分析？对mpvue来讲，组件是构成项目的基本单元。只要划分好了组件，项目写起来那是非常的快的。为了方便理解，这里定义两类组件：页面组件，功能组件。页面组件就是当前你看见的这个网页地址的完整显示，他将包含几个功能组件。美团外卖小程序功能组件很多，大致的列几个:

1. 评分组件，需要的props的值为：星星的大小，商家的评分
2. 公告组件：每个项目难免发布一些公告或者弹窗，把它抽出来当一个组件
3. 间距split组件： 组件可以很大很多功能，也可能很少，只要在项目中经常用的就可以抽出来当一个组件。
4. swiper组件： 轮播图作为一个组件，可以减少我们一个页面成堆的代码，把它抽出来当一个组件，日后也更易维护。

一、 组件间可以通过props传递数据,这里以选物品 -> 选择组件 -> 购物车 -> 订单详情一条线来详细描述组件间数据怎么传递的。

二、父子组件间方法的调用可以通过$on, $emit

var Event = new Vue();//相当于又new了一个vue实例，Event中含有vue的全部方法Event.$emit('msg',this.msg);//发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置Event.$on('msg',function(msg){//接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，要对数据的操})

很多东西想聊出来，比如mpvue小程序中引用图片一定要放在static文件目录下，组件的属性计算computed。以及vuex在全局数据的使用等等。但是一个人的精力真的有限，本人也是一个大三的学生，最近忙于找实习公司，同时也在研究下vue底层源码分析。所有可能到这里差不多就结束了。对其中一些内容比较喜欢的可以去我的github上下载，慢慢研究。这里附上我项目的地址mpvue美团外卖小程序。也希望有志同道和的可以加入一起讨论，如果有什么不懂得可以直接评论我，或者发我qq：我也会第一时间帮你解答。也希望通过这个为我找实习增添色彩吧，下期将推出更加精彩的vue项目,持续关注我吧！！！