顺企网查企业电话/关键词优化公司哪家效果好
交互反馈
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源创计划”，欢迎正在阅读的你也加入，一起分享。