微信小程序（七）界面交互反馈的几种方法

交互反馈

• 用户在小程序上进行交互的时候，某些操作可能比较耗时，需要我们予以及时的反馈，去舒缓用户等待的不良情绪，这样的反馈就是交互反馈。
• 常见的交互反馈有：
  • 触摸反馈
  • Toast和模态对话框
  • 界面滚动

触摸反馈

• 通常页面会摆放一些button按钮或者view区域，用户触摸按钮之后会给按钮换个颜色。
• 用户触摸后的样式设置可用通过组件的hover-class属性实现：

<button hover-class="sky"  bindtap="pay">支付</button>

• 如果按钮是要加载数据的，按钮要显示一个loading的状态。
  按钮loading 状态的显示，可以通过 组件的loading 属性实现：

 <button hover-class="sky" loading="{{paying}}" bindtap="pay">支付</button>

 data: {
    paying:false,
  },
  
  pay(){
    this.setData({
      paying:true
    })
}

Toast 提示

• 在某个操作成功之后，我们希望提示用户这次操作成功，并且不打断用户接下来的操作。这就需要使用弹出式提示Toast，Toast提示默认1.5秒后自动消失。

// 显示Toast
wx.showToast({ 
  title: '已发送',
  icon: 'success',
  duration: 1500
})
// 隐藏Toast
wx.hideToast()

模态框

• 在做错误提示的时候，Toast 是不合适的，因为错误提示需要明确告知用户具体原因，因此不适合一闪而过的Toast。
• 错误提示需要使用模态框，模态框可以让用户明确知晓自己的操作结果，同时附带下一步操作的指引。
  • showModal 显示模态对话框
  • title 提示的标题
  • content 提示的内容
  • confirmText 确认按钮的文字，最多 4 个字符
  • cancelText 取消按钮的文字，最多 4 个字符
  • success 接口调用成功的回调函数，返回res
  • confirm 为 true 时，表示用户点击了确定按钮
  • cancel 为 true 时，表示用户点击了取消按钮

wx.showModal({
  title: '标题',
  content: '告知当前状态，信息和解决方法',
  confirmText: '主操作',
  cancelText: '次要操作',
  success: function(res) {
    if (res.confirm) {
      console.log('用户点击主操作')
    } else if (res.cancel) {
      console.log('用户点击次要操作')
    }
  }
})