【仿美团点餐App】—— 首页（一）

一、首页布局

pages.json的代码如下

{
	"pages": [
		{
			"path": "pages/main/main",
			"style": {
				"navigationBarTitleText": "点餐小程序",
				"navigationStyle": "custom",
                                "enablePullDownRefresh": true
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "点餐小程序",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
                "onReachBottomDistance": 50
	}
}

• navigationStyle属性值为custom，设置成自定义导航；
• enablePullDownRefresh属性值为true，表示下拉刷新；
• onReachBottomDistance属性值未50，表示上拉触底事件触发时距底部的距离，单位为px;　　

二、异步数据流对接配合地图定位显示附近的商铺

 uni-app已内置Vuex，无须安装即可使用。

 1.首先配置Vuex，在根目录创建store->index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store=new Vuex.Store({
    modules:{}
});

export default store;

2.将Vuex注册到Vue中，main.js文件中的代码如下：

import Vue from 'vue'
import App from './App'
import store from "./store";

Vue.config.productionTip = false

App.mpType = 'app'

const app = new