uni-app 界面交互实战（微信小程序可用）

蔚落 2021-12-05 05:21 162阅读 0赞

## 交互反馈 ##

### Toast ###

显示消息提示框

uni.showToast({
        title: '标题',	// 标题
    	icon: 'none',	// 不显示图标
    	mask: true, // 显示透明蒙层，防止触摸穿透
        duration: 2000
    });

隐藏消息提示框

uni.hideToast();

### Loading ###

> 显示 `loading` 提示框, 需主动调用 `uni.hideLoading` 才能关闭提示框

uni.showLoading({
        title: '加载中...',	// 标题
    	mask: false, // 不显示透明蒙层
    });

隐藏消息提示框

uni.hideLoading();

**Tip**  
微信小程序中 `Toast` 和 `Loading` 只能同时显示一个

### Modal ###

> 显示模态弹窗，类似于标准 `html` 的消息框：`alert、confirm`。

uni.showModal({
        title: '提示',	// 提示的标题
        content: '这是一个模态弹窗',	// 提示的内容
    	showCancel: true,	// 是否显示取消按钮，默认为 true
    	cancelText:"残忍离去",	// 取消按钮的文字，默认为"取消"，最多 4 个字符
    	cancelColor:"#000000",	// 取消按钮的文字颜色，默认为"#000000"
    	confirmText:"给个鼓励",	// 确认按钮的文字，默认为"确认"，最多 4 个字符
    	confirmColor:"# color", // 确定按钮的文字颜色，H5平台默认为"#007aff"，微信小程序平台默认为"#3CC51F"
        success: function (res) {
            if (res.confirm) {
                console.log('用户点击确定');
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        }
    });

### ActionSheel ###

> 显示操作菜单

uni.showActionSheet({
        itemList: ['A', 'B', 'C'],
    	itemColor:'按钮的文字颜色，字符串格式，默认为"#000000"'
        success: function (res) {
            console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
        },
        fail: function (res) {
            console.log(res.errMsg);
        }
    });

## 设置导航条 ##

### 动态设置当前页面的标题、颜色 ###

uni.setNavigationBarTitle({
        title: '新的标题'
    });
    
    uni.setNavigationBarColor({
        frontColor: '#ffffff',	// 前景色，仅支持  #ffffff 和 #000000
        backgroundColor: '#ff0000',	// 背景色
        animation: {	// 动画效果
            duration: 400,	// 动画变化时间，单位 ms
            timingFunc: 'easeIn'	// 动画变化方式 'easeIn':动画以低速开始
        }
    })

### 导航条加载动画 ###

显示动画
    uni.showNavigationBarLoading()
    
    隐藏动画
    uni.hideNavigationBarLoading()

## 设置 Tabbar ##

### 动态设置 Tabbar 某一项内容 ###

uni.setTabBarItem({
      index: 0,	// tabBar 的哪一项，从左边算起
      text: 'text',	// tabBarItem 的文本
      iconPath: '/path/to/iconPath',
      selectedIconPath: '/path/to/selectedIconPath'
    })

### 动态设置 Tabbar 整体样式 ###

uni.setTabBarStyle({
      color: '#FF0000',	// tab 上的文字默认颜色
      selectedColor: '#00FF00',	// tab 上的文字选中时的颜色
      backgroundColor: '#0000FF',	// tab 的背景色
      borderStyle: 'white'		// tabBar上边框的颜色， 仅支持 black/white
    })

### 显示和隐藏 Tabbar ###

显示 tabbar
    uni.hideTabBar({
    	animation:true	// 默认是false
    })
    
    隐藏 tabbar
    uni.hideTabBar({
    	animation:false	// 默认是false
    })

### 为 Tabbar 右上角添加删除文本、红点 ###

右上角添加文本
    uni.setTabBarBadge({
      index: 0,
      text: '1'	// 不超过 3 个半角字符
    })
    
    右上角移除文本
    uni.removeTabBarBadge(OBJECT)
    
    显示 tabBar 某一项的右上角的红点。
    uni.showTabBarRedDot(OBJECT)
    
    隐藏 tabBar 某一项的右上角的红点。
    uni.hideTabBarRedDot(OBJECT)

## 背景 ##

### 页面背景修改 ###

uni.setBackgroundColor({
        backgroundColor: '#ffffff',	// 窗口的背景色
        backgroundColorTop: '#222222',	// 顶部窗口的背景色
        backgroundColorBottom: '#333333'	// 底部窗口的背景色
    });

### 下拉背景色修改 ###

uni.setBackgroundTextStyle({
      textStyle: 'dark' // 下拉背景字体、loading 图的样式为 dark
    })

## 滚动到指定位置 ##

> 将页面滚动到指定位置

uni.pageScrollTo({
        scrollTop: 0,	// 滚动到页面的目标位置（单位px）
        duration: 300
    });