【仿美团点餐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多端跨平台开发从入门到企业级实战》

【仿美团点餐App】—— 首页（二）相关推荐

【vue】二、vue2仿去哪儿网app——首页开发
文章目录二.vue2仿去哪儿网app--首页开发 Ⅰ 页面结构 Ⅱ 开发笔记及注意点 1.公共样式抽取 2.路径 --> 绝对路径 3.用padding-bottom实现固定宽高比 4.保证内 ...
nuxt全栈仿美团官网13——首页下面的格调
文档:nuxt全栈仿美团官网13--首页下面的格... 链接:http://note.youdao.com/noteshare?id=6b7b36720b665f830357b221a0d28fba& ...
游戏陪玩源码开发，仿某看书app首页Banner轮播+背景渐变
在游戏陪玩源码开发时,会设计到很多UI界面设计,其中首页Banner轮播就很重要,最近发现一个比较有意思的效果图,于是想自己操作实践下.效果图如下: 作者实现的效果: 1. 游戏陪玩源码开发,仿某看书 ...
Flutter仿美团应用开发笔记-首页 (1)
首页篇 Github项目地址:项目地址上一篇博客讲解了该应用的基础结构,如底部导航栏等.基础结构篇这篇博客将详细讲解美团首页的界面实现,在下一篇博客实现推荐卡片无限加载,带插入和移除动画的列表,弹 ...
vue高仿饿了么APP（二）
这里我直接跳过vue-cli的安装. 一,vue.js代码是如何运行的? 1,进入页面,首先加载index.html和main.js文件. ① index.html文件 <!DOCTYPE ht ...
《iVX 高仿美团APP制作移动端完整项目》01 标题需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.创建项目首先打开在线编辑器地址:https://editor.ivx ...
《iVX 高仿美团APP制作移动端完整项目》04 美食页标题、搜索、商家标题制作
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.美食页顶部商家页制作 1.1 页面主格调确认该美食页为首页中美食按钮 ...
《iVX 高仿美团APP制作移动端完整项目》03 推介信息及推荐商家分析及制作
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.推荐信息制作推荐信息与之前的标题下推荐信息制作类似: 此时依旧创建一 ...
《iVX 高仿美团APP制作移动端完整项目》02 搜索、搜索提示及类别需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.搜索制作在上一节中我们完成了标题头的制作,接下来我们查看如何制作搜索 ...
Android 仿美团选择城市、微信通讯录、饿了么点餐列表的导航悬停分组索引列表
SuspensionIndexBar 项目地址:mcxtzhang/SuspensionIndexBar 简介:快速实现分组悬停.右侧索引导航联动列表. 如美团选择城市界面,微信通讯录界面.饿了么 ...

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

【仿美团点餐App】—— 首页（二）相关推荐

最新文章

热门文章