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

一、实现下拉刷新

在page->main->main.vue新增代码如下：

<script>
	import {mapState,mapActions} from "vuex";
	export default {
		//下拉刷新
		onPullDownRefresh() {
			this.getShop({page:1,lng:this.lng,lat:this.lat,complete:()=>{
					uni.stopPullDownRefresh();
				}
			});
		}
	}
</script>

使用onPullDownRefresh()钩子函数监听下拉刷新，在该函数内部将当前页面设置为1.

用getShop()方法，重新获取商铺数据。

在complete()回调函数内使用stopPullDownRefresh()方法，停止下拉刷新。

注意：需要在page.json里找到当前页面的pages节点，并在style选项中开启enablePullDownRefresh，才能支持下拉刷新。

"pages": [
		{
			"path": "pages/main/main",
			"style": {
				"navigationBarTitleText": "点餐小程序",
				"navigationStyle": "custom",
				"enablePullDownRefresh": true
			}
		}
]　　

"pages": [ { "path": "pages/main/main", "style": { "navigationBarTitleText": "点餐小程序", "navigationStyle": "custom", "enablePullDownRefresh": true } } ]　　

二、实现上拉加载和分享小程序

在page->main->main.vue新增代码如下：

//分享小程序
onShareAppMessage(res) {
   return {
	title: 点餐小程序,
	path: /pages/main/main
    }
},
//上拉加载数据
onReachBottom(){
   if(this.curPage<this.maxPage) {
	this.curPage++;
	this.getShopPage({page:this.curPage,lng:this.lng,lat:this.lat});
    }
}

//分享小程序 onShareAppMessage(res) { return { title: 点餐小程序, path: /pages/main/main } }, //上拉加载数据 onReachBottom(){ if(this.curPage

使用onReachBottom()函数可以监听页面是否滚动到底部。

如果滚动到底部，并且当前页码小于总页码，则当前页码加1，调用Vuex商铺分页显示数据的getShopPage()方法，并将页码传进去实现上拉加载数据。

使用onShareAppMessage()函数可以实现分享小程序的功能。

---

注：项目教程来自《uni-app多端跨平台开发从入门到企业级实战》

一、实现下拉刷新 在page->main->main.vue新增代码如下： 使用onPullDownRefresh()钩子函数监听下拉刷新，在该函数内部将当前页面设置为1. 用getShop()方法，重新获取商铺数据。 在complete()回调函数内使用stopPullDownRefresh()方法，停止下拉刷新。 注意：需要在page.json里找到当前页面的pages节点，并在style选项中开启enablePullDownRefresh，才能支持下拉刷新。 "pages": [ { "path": "pages/main/main", "style": { "navigationBarTitleText": "点餐小程序", "navigationStyle": "custom", "enablePullDownRefresh": true } } ]　　 二、实现上拉加载和分享小程序 在page->main->main.vue新增代码如下： //分享小程序 onShareAppMessage(res) { return { title: 点餐小程序, path: /pages/main/main } }, //上拉加载数据 onReachBottom(){ if(this.curPage