小程序的view容器组件和button组件提供了hover-class属性，触摸时会往该组件加上对应的class改变组件的样式
<button hover-class="hover">点击button</button> <button hover-class="hover">点击view</button>
.hover{
background-color: gray;
}
有时在点击button按钮处理更耗时的操作时，使用button组件的loading属性，在按钮的文字前边出现一个Loading，让用户明确的感觉到，这个操作会比较耗时，需要等待一小段时间。
<button loading="{{loading}}" bindtap="tap">点击</button>
data: {
loading:false,
},
tap:function(){
//把按钮的 loading 状态显示出来
this.setData({
loading:true
})
//接着做耗时的操作
/*......*/
},
在完成某个操作成功之后，我们希望告诉用户这次操作成功并且不打断用户接下来的操作。弹出式提示Toast就是用在这样的场景上，Toast提示默认1.5秒后自动消失
<button bindtap="tap">发送</button>
tap:function(){
wx.showToast({
title: ‘已发送‘,
icon:‘success‘,
duration:1500,
})
},
注意，我们不应该把Toast用于错误提示，因为错误提示需要明确告知用户具体原因，因此不适合用这种一闪而过的Toast弹出式提示。一般需要用户明确知晓操作结果状态的话，会使用模态对话框来提示，同时附带下一步操作的指引。
<button bindtap="tap">删除</button>
tap:function(){
wx.showModal({
title: ‘‘,
content: ‘是否确认删除‘,
success:function(res){
if(res.confirm){
console.log(‘用户点击确定‘)
}
else if(res.cancel){
console.log(‘用户点击取消‘)
}
}
})
},
为了让用户可以快速刷新当前界面的信息，一般在小程序里会通过下拉整个界面这个操作来触发，此时age构造器的onPullDownRefresh回调会被触发，此时开发者重新拉取新数据进行渲染
//page.json
{"enablePullDownRefresh": true }
//page.js
Page({
onPullDownRefresh: function() {
// 用户触发了下拉刷新操作
// 拉取新数据重新渲染界面
// wx.stopPullDownRefresh() // 可以停止当前页面的下拉刷新。
}
})上拉触底
//page.json
// 界面的下方距离页面底部距离小于onReachBottomDistance像素时触发onReachBottom回调
{"onReachBottomDistance": 100 }
//page.js
Page({
onReachBottom: function() {
// 当界面的下方距离页面底部距离小于100像素时触发回调
}
})
原文：https://www.cnblogs.com/shanlu0000/p/12566413.html