【仿美团点餐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
			}
		}
]　　

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

在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});
    }
}		    

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

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

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

---

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