[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)。
- 微信
- 小程序
- 1. 代碼組成
- 1.1 JSON配置--'*.json'文件
- 1.2 WXML模板--'*.wxml'文件
- 1.3 WXSS樣式--'*.wxss'文件
- 1.4 JavaScript腳本--'*.js'文件
- 2. 客戶端運行
- 2.1 邏輯層和渲染層
- 2.1.1 邏輯層--App Service
- 2.1.2 渲染層/視圖層--View
- 2.1.3 通信模型
- 2.1.4 數據驅動
- 2.1.5 雙線程下的界面渲染
- 2.2 程序與頁面
- 2.3 組件
- 2.4 API
- 2.5 事件
- 2.6 兼容
- 3. 應用設計
- 3.1 Flex布局
- 3.2 界面常見的交互反饋
- 3.3 發起HTTPS網絡通信--wx.request
- 3.4 微信登錄
- 3.5 本地數據緩存
- 3.6 設備能力
- 4. 小程序的協同工作和發布
- 4.1 協同工作
- 4.2 用戶體驗審視
- 4.3 發布
- 4.4 運營
- 5. 底層框架
- 5.1 雙線程模型
- 5.2 組件系統--Exparser框架
- 5.3 原生組件
- 5.4 小程序與客戶端通信原理
- 6. 運行和性能優化
- 6.1 啟動--代碼加載
- 6.2 頁面準備
- 6.3 數據通信
- 6.4 視圖層渲染
- 6.5 原生組件通信
- 7. 小程序基礎庫的更新迭代
- 8. 微信開發者工具
- 騰訊云支持
- wafer
- Wafer2 快速開發 Demo - PHP
- WXAPI
- api列表