微信小程序_交互反馈

界面常见的交互反馈

触摸反馈

button和view触摸后改变样式,
1.在wxml中的view或button设置hover-class属性, 在CSS中进行相应的设置
2.在wxml中给button组件绑定一个loading属性值,在data中设为false,在点击事件中设为true

Toast和模态对话框

1.Toast,

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

2.模态对话框,

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

界面滚动

1.下拉刷新

{“enablePullDownRefresh”: true }

onPullDownRefresh: function() {
// 用户触发了下拉刷新操作
// 拉取新数据重新渲染界面
// wx.stopPullDownRefresh() // 可以停止当前页面的下拉刷新。
}

2.上拉触底

// 界面的下方距离页面底部距离小于onReachBottomDistance像素时触发onReachBottom回调
{“onReachBottomDistance”: 100 }

onReachBottom: function() {
// 当界面的下方距离页面底部距离小于100像素时触发回调
}