1. view容器组件和button组件
1.1 触摸改变样式（hover-class）
/*page.wxss */
.hover{
background-color: gray;
}
<!--page.wxml -->
<button type="default" hover-class="hover"> 点击button </button>
<view hover-class="hover"> 点击view</view>
1.2 button的loading属性
<button loading="{{loading}}" bindtap="tap">操作</button>
//page.js
Page({
data: { loading: false }
tap: function() {
// 把按钮的loading状态显示出来
this.setData({
loading: true
})
// 接着做耗时的操作
}
})
2. Toast和模态对话框
2.1 Toast
Page({
onLoad: function() {
wx.showToast({ // 显示Toast
title: '已发送',
icon: 'success',
duration: 1500
})
// wx.hideToast() // 隐藏Toast
}
})
特别要注意，我们不应该把Toast用于错误提示，因为错误提示需要明确告知用户具体原因，因此不适合用这种一闪而过的Toast弹出式提示。一般需要用户明确知晓操作结果状态的话，会使用模态对话框来提示，同时附带下一步操作的指引。
2.2 模态对话框
onLoad: function() {
wx.showModal({
title: '标题',
content: '告知当前状态，信息和解决方法',
confirmText: '主操作',
cancelText: '次要操作',
success: function(res) {
if (res.confirm) {
console.log('用户点击主操作')
} else if (res.cancel) {
console.log('用户点击次要操作')
}
}
})
}
网友评论