android toast 前景色,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

});

本文同步分享在 博客“_龙衣”(CSDN)。

如有侵权，请联系 support@oschina.cn 删除。

本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。