界面交互~触摸反馈

通常页面会摆放一些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属性

<button hover-class="hover" bindtap="loadEvent" loading="{{loading}}"> 点击button </button>  loading:false  loadEvent(){     const _this = this;     // 把按钮的loading状态显示出来     this.setData({       loading:true     })     //接着做耗时操作     setTimeout(function () {       _this.setData({         loading:false       })     }, 1000)   }

结果：

.