用户和小程序上进行交互的时候，某些操作可能比较耗时，我们应该予以及时的反馈以舒缓用户等待的不良情绪。
1 触摸反馈
通常页面会摆放一些button按钮或者view区域，用户触摸按钮之后会触发下一步的操作。这种情况下，我们要对触摸这个行为给予用户一些响应。如图4-17所示，当我们手指触摸了button文字所在的cell区域时，对应的区域底色变成浅灰色，这样用户就可以知道小程序是有及时响应他的这次触摸操作，用户就不会很迷惑。
图4-17 触摸区域底色变成灰色响应用户的触摸操作
小程序的view容器组件和button组件提供了hover-class属性，触摸时会往该组件加上对应的class改变组件的样式。
代码清单4-1 通过hover-class属性改变触摸时的样式
/*page.wxss */
.hover{
background-color: gray;
}
<!--page.wxml -->
<button hover-class="hover"> 点击button </button>
<view hover-class="hover"> 点击view</view>
对于用户的操作及时响应是非常优秀的体验，有时候在点击button按钮处理更耗时的操作时，我们也会使用button组件的loading属性，在按钮的文字前边出现一个Loading，让用户明确的感觉到，这个操作会比较耗时，需要等待一小段时间。
图4-18 button文字前出现loading
代码清单4-2 设置button的loading属性
<!--page.wxml -->
<button loading="{
{loading}}" bindtap="tap">操作</button>
//page.js
Page({
data: { loading: false },
tap: function() {
// 把按钮的loading状态显示出来
this.setData({
loading: true
})
// 接着做耗时的操作
}
})
2 Toast和模态对话框
在完成某个操作成功之后，我们希望告诉用户这次操作成功并且不打断用户接下来的操作。弹出式提示Toast就是用在这样的场景上，Toast提示默认1.5秒后自动消失，其表现形式如图4-19所示。
图4-19 Toast弹出式提示
小程序提供了显示隐藏Toast的接口，代码示例如下所示。
代码清单4-3 显示/隐藏Toast
Page({
onLoad: function() {
wx.showToast({ // 显示Toast
title: '已发送',
icon: 'success',
duration: 1500
})
// wx.hideToast() // 隐藏Toast
}
})
特别要注意，我们不应该把Toast用于错误提示，因为错误提示需要明确告知用户具体原因，因此不适合用这种一闪而过的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 界面滚动
往往手机屏幕是承载不了所有信息的，所以内容区域肯定会超出屏幕区域，用户可以通过滑动屏幕来查看下一屏的内容，这是非常常见的界面滚动的交互。
为了让用户可以快速刷新当前界面的信息，一般在小程序里会通过下拉整个界面这个操作来触发，如图4-21所示。
图4-21 下拉刷新
宿主环境提供了统一的下拉刷新交互，开发者只需要通过配置开启当前页面的下拉刷新，用户往下拉动界面触发下拉刷新操作时，Page构造器的onPullDownRefresh回调会被触发，此时开发者重新拉取新数据进行渲染，实例代码如下所示。
代码清单4-5 页面下拉刷新
//page.json
{"enablePullDownRefresh": true }
//page.js
Page({
onPullDownRefresh: function() {
// 用户触发了下拉刷新操作
// 拉取新数据重新渲染界面
// wx.stopPullDownRefresh() // 可以停止当前页面的下拉刷新。
}
})
多数的购物小程序会在首页展示一个商品列表，用户滚动到底部的时候，会加载下一页的商品列表渲染到列表的下方，我们把这个交互操作叫为上拉触底。宿主环境提供了上拉的配置和操作触发的回调onReachBottom，如下代码所示。
代码清单4-6 页面上拉触底
//page.json
// 界面的下方距离页面底部距离小于onReachBottomDistance像素时触发onReachBottom回调
{"onReachBottomDistance": 100 }
//page.js
Page({
onReachBottom: function() {
// 当界面的下方距离页面底部距离小于100像素时触发回调
}
})
当然我们有些时候并不想整个页面进行滚动，而是页面中某一小块区域需要可滚动，此时就要用到宿主环境所提供的scroll-view可滚动视图组件。可以通过组件的scroll-x和scroll-y属性决定滚动区域是否可以横向或者纵向滚动，scroll-view组件也提供了丰富的滚动回调触发事件，这部分我们就不再展开细节，读者可以通过scroll-view组件的官方文档了解到细节[1]
https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000224fc9d0f98cb0086f4eff5180a#_ftn1