uniapp中的交互反馈

曼妙佳人

官方的
uni.showToast
显示消息提示框。

1. uni.showToast({
   
2.     title: '标题',
   
3.     duration: 2000
   
4. });

复制代码

uni.hideToast();
隐藏消息提示框。

1. uni.hideToast();

复制代码

uni.showLoading();
显示 loading 提示框, 需主动调用hideLoading 才能关闭提示框。

1. uni.showLoading({
   
2.     title: '加载中'
   
3. });

复制代码

uni.hideLoading();
隐藏消息提示框。

1. uni.showLoading({
   
2.     title: '加载中'
   
3. });
   
4. 
   
5. setTimeout(function () {
   
6.     uni.hideLoading();
   
7. }, 2000);

复制代码

uni.showModal();
显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。

1. uni.showModal({
   
2.     title: '提示',
   
3.     content: '这是一个模态弹窗',
   
4.     success: function (res) {
   
5.         if (res.confirm) {
   
6.             console.log('用户点击确定');
   
7.         } else if (res.cancel) {
   
8.             console.log('用户点击取消');
   
9.         }
   
10.     }
    
11. });

复制代码

uni.showActionSheet();
从底部向上弹出操作菜单

1. uni.showActionSheet({
   
2.     itemList: ['A', 'B', 'C'],
   
3.     success: function (res) {
   
4.         console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
   
5.     },
   
6.     fail: function (res) {
   
7.         console.log(res.errMsg);
   
8.     }
   
9. });

复制代码

相关拓展
如果需要用到自定义内容的弹窗，则可以在插件市场引入uni-popup 弹出层，这个是插件市场中最成熟的一个
也可以引入ColorUI组件库到项目中，这里面也有很多封装好的组件，但是弹窗这一块我还是比较喜欢用uni-popup，真香~