[TOC] ## 3.2 界面常见的交互反馈 用户和小程序上进行交互的时候，某些操作可能比较耗时，我们应该予以及时的反馈以舒缓用户等待的不良情绪。 ### 3.2.1 触摸反馈 * hover 小程序的`view`容器组件和`button`组件提供了hover-class属性，触摸时会往该组件加上对应的class改变组件的样式。  :-: 图4-17 触摸区域底色变成灰色响应用户的触摸操作 * loading 有时候在点击`button`按钮处理更耗时的操作时，我们也会使用button组件的loading属性，在按钮的文字前边出现一个Loading，让用户明确的感觉到，这个操作会比较耗时，需要等待一小段时间。  :-: 图4-18 button文字前出现loading ### 3.2.2 Toast和模态(Modal)对话框 * Toast 在完成某个操作成功之后，我们希望告诉用户这次操作成功并且不打断用户接下来的操作。弹出式提示Toast就是用在这样的场景上，Toast提示默认1.5秒后自动消失。 :-:  :-: 图4-19 Toast弹出式提示 小程序提供了显示隐藏Toast的接口，代码示例如下所示。 代码清单4-3 显示/隐藏Toast ~~~ Page({ onLoad: function() { wx.showToast({ // 显示Toast title: '已发送', icon: 'success', duration: 1500 }) // wx.hideToast() // 隐藏Toast } }) ~~~ * 模态(Modal)对话框 一般需要用户明确知晓操作结果状态的话，会使用模态对话框来提示，不适合用一闪而过的Toast弹出式提示。 :-:  :-: 图4-20 模态对话框 代码清单4-4 显示模态对话框 ~~~ Page({ onLoad: function() { wx.showModal({ title: '标题', content: '告知当前状态，信息和解决方法', confirmText: '主操作', cancelText: '次要操作', success: function(res) { if (res.confirm) { console.log('用户点击主操作') } else if (res.cancel) { console.log('用户点击次要操作') } } }) } }) ~~~ ### 3.2.3 界面滚动 为了让用户可以快速刷新当前界面的信息，一般在小程序里会通过下拉整个界面这个操作来触发。 * 下拉刷新 宿主环境提供了统一的下拉刷新交互，开发者只需要通过配置开启当前页面的下拉刷新，用户往下拉动界面触发下拉刷新操作时，Page构造器的onPullDownRefresh回调会被触发，此时开发者重新拉取新数据进行渲染，实例代码如下所示。 代码清单4-5 页面下拉刷新 ~~~ //page.json {"enablePullDownRefresh": true } //page.js Page({ onPullDownRefresh: function() { // 用户触发了下拉刷新操作 // 拉取新数据重新渲染界面 // wx.stopPullDownRefresh() // 可以停止当前页面的下拉刷新。 } }) ~~~ * 上拉触底 多数的购物小程序会在首页展示一个商品列表，用户滚动到底部的时候，会加载下一页的商品列表渲染到列表的下方，我们把这个交互操作叫为上拉触底。宿主环境提供了上拉的配置和操作触发的回调，如下代码所示。 代码清单4-6 页面上拉触底 ~~~ //page.json // 界面的下方距离页面底部距离小于onReachBottomDistance像素时触发onReachBottom回调 {"onReachBottomDistance": 100 } //page.js Page({ onReachBottom: function() { // 当界面的下方距离页面底部距离小于100像素时触发回调 } }) ~~~ * 可滚动视图组件 是页面中某一小块区域需要可滚动，此时就要用到宿主环境所提供的`scroll-view`可滚动视图组件。可以通过组件的scroll-x和scroll-y属性决定滚动区域是否可以横向或者纵向滚动，scroll-view组件也提供了丰富的滚动回调触发事件，详见[官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html)。