uni-app 界面交互实战（微信小程序可用）
交互反馈
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
});