Comprehensive user interface components, dialogs, navigation, and visual feedback capabilities.
Display temporary toast messages to users.
/**
* Show toast message
* @param options - Toast configuration options
*/
function showToast(options: ShowToastOptions): void;
/**
* Hide toast message
*/
function hideToast(): void;
interface ShowToastOptions {
title: string;
icon?: 'success' | 'error' | 'fail' | 'exception' | 'loading' | 'none';
image?: string;
duration?: number; // Default 1500ms
mask?: boolean;
position?: 'top' | 'center' | 'bottom';
success?: (result: any) => void;
fail?: (error: any) => void;
complete?: () => void;
}Usage Examples:
import uni from "@dcloudio/uni-app-plus";
// Success toast
uni.showToast({
title: 'Operation successful',
icon: 'success',
duration: 2000
});
// Error toast
uni.showToast({
title: 'Something went wrong',
icon: 'error'
});
// Custom image toast
uni.showToast({
title: 'Custom notification',
image: '/static/icons/notification.png',
duration: 3000
});
// Hide toast manually
setTimeout(() => {
uni.hideToast();
}, 1000);Display loading indicators during operations.
/**
* Show loading dialog
* @param options - Loading configuration options
*/
function showLoading(options: ShowLoadingOptions): void;
/**
* Hide loading dialog
*/
function hideLoading(): void;
interface ShowLoadingOptions {
title: string;
mask?: boolean;
success?: (result: any) => void;
fail?: (error: any) => void;
complete?: () => void;
}Usage Example:
// Show loading
uni.showLoading({
title: 'Loading...',
mask: true
});
// Simulate async operation
setTimeout(() => {
uni.hideLoading();
uni.showToast({
title: 'Load complete',
icon: 'success'
});
}, 3000);Display modal dialogs for user confirmation and input.
/**
* Show modal dialog
* @param options - Modal configuration options
*/
function showModal(options: ShowModalOptions): void;
interface ShowModalOptions {
title?: string;
content?: string;
showCancel?: boolean;
cancelText?: string;
cancelColor?: string;
confirmText?: string;
confirmColor?: string;
editable?: boolean;
placeholderText?: string;
success?: (result: ShowModalResult) => void;
fail?: (error: any) => void;
complete?: () => void;
}
interface ShowModalResult {
confirm: boolean;
cancel: boolean;
content?: string; // When editable is true
}Usage Examples:
// Confirmation dialog
uni.showModal({
title: 'Confirm Delete',
content: 'Are you sure you want to delete this item?',
showCancel: true,
confirmText: 'Delete',
confirmColor: '#ff4757',
success: (res) => {
if (res.confirm) {
console.log('User confirmed deletion');
// Perform delete operation
} else if (res.cancel) {
console.log('User cancelled');
}
}
});
// Input dialog
uni.showModal({
title: 'Enter Name',
editable: true,
placeholderText: 'Please enter your name',
success: (res) => {
if (res.confirm && res.content) {
console.log('User entered:', res.content);
}
}
});Display action sheet menus for user selection.
/**
* Show action sheet
* @param options - Action sheet configuration options
*/
function showActionSheet(options: ShowActionSheetOptions): void;
interface ShowActionSheetOptions {
itemList: string[];
itemColor?: string;
popover?: PopoverOptions;
success?: (result: ShowActionSheetResult) => void;
fail?: (error: any) => void;
complete?: () => void;
}
interface ShowActionSheetResult {
tapIndex: number;
}
interface PopoverOptions {
top: number;
left: number;
width: number;
height: number;
}Usage Example:
uni.showActionSheet({
itemList: ['Take Photo', 'Choose from Album', 'Cancel'],
success: (res) => {
switch (res.tapIndex) {
case 0:
console.log('Take photo selected');
// Handle camera
break;
case 1:
console.log('Choose from album selected');
// Handle gallery
break;
case 2:
console.log('Cancel selected');
break;
}
}
});Control navigation bar appearance and behavior.
/**
* Set navigation bar title
* @param options - Navigation bar title options
*/
function setNavigationBarTitle(options: SetNavigationBarTitleOptions): void;
/**
* Set navigation bar color
* @param options - Navigation bar color options
*/
function setNavigationBarColor(options: SetNavigationBarColorOptions): void;
/**
* Show navigation bar loading
*/
function showNavigationBarLoading(): void;
/**
* Hide navigation bar loading
*/
function hideNavigationBarLoading(): void;
interface SetNavigationBarTitleOptions {
title: string;
success?: (result: any) => void;
fail?: (error: any) => void;
complete?: () => void;
}
interface SetNavigationBarColorOptions {
frontColor: '#ffffff' | '#000000';
backgroundColor: string;
animation?: NavigationBarAnimation;
success?: (result: any) => void;
fail?: (error: any) => void;
complete?: () => void;
}
interface NavigationBarAnimation {
duration?: number;
timingFunc?: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut';
}Manage tab bar appearance and behavior.
/**
* Set tab bar item
* @param options - Tab bar item options
*/
function setTabBarItem(options: SetTabBarItemOptions): void;
/**
* Set tab bar style
* @param options - Tab bar style options
*/
function setTabBarStyle(options: SetTabBarStyleOptions): void;
/**
* Hide tab bar
* @param options - Hide options
*/
function hideTabBar(options?: HideTabBarOptions): void;
/**
* Show tab bar
* @param options - Show options
*/
function showTabBar(options?: ShowTabBarOptions): void;
/**
* Set tab bar badge
* @param options - Badge options
*/
function setTabBarBadge(options: SetTabBarBadgeOptions): void;
/**
* Remove tab bar badge
* @param options - Remove badge options
*/
function removeTabBarBadge(options: RemoveTabBarBadgeOptions): void;
/**
* Show tab bar red dot
* @param options - Red dot options
*/
function showTabBarRedDot(options: ShowTabBarRedDotOptions): void;
/**
* Hide tab bar red dot
* @param options - Hide red dot options
*/
function hideTabBarRedDot(options: HideTabBarRedDotOptions): void;
interface SetTabBarItemOptions {
index: number;
text?: string;
iconPath?: string;
selectedIconPath?: string;
success?: (result: any) => void;
fail?: (error: any) => void;
complete?: () => void;
}
interface SetTabBarBadgeOptions {
index: number;
text: string;
success?: (result: any) => void;
fail?: (error: any) => void;
complete?: () => void;
}Create and control animations for UI elements.
/**
* Create animation instance
* @param options - Animation options
* @returns Animation instance
*/
function createAnimation(options?: CreateAnimationOptions): Animation;
interface CreateAnimationOptions {
duration?: number;
timingFunction?: 'linear' | 'ease' | 'ease-in' | 'ease-in-out' | 'ease-out' | 'step-start' | 'step-end';
delay?: number;
transformOrigin?: string;
}
interface Animation {
opacity(value: number): Animation;
backgroundColor(color: string): Animation;
width(length: number | string): Animation;
height(length: number | string): Animation;
top(length: number | string): Animation;
left(length: number | string): Animation;
bottom(length: number | string): Animation;
right(length: number | string): Animation;
rotate(angle: number | string): Animation;
rotateX(angle: number | string): Animation;
rotateY(angle: number | string): Animation;
rotateZ(angle: number | string): Animation;
rotate3d(x: number, y: number, z: number, angle: number | string): Animation;
scale(sx: number, sy?: number): Animation;
scaleX(scale: number): Animation;
scaleY(scale: number): Animation;
scaleZ(scale: number): Animation;
scale3d(sx: number, sy: number, sz: number): Animation;
translate(tx: number | string, ty?: number | string): Animation;
translateX(translation: number | string): Animation;
translateY(translation: number | string): Animation;
translateZ(translation: number | string): Animation;
translate3d(tx: number | string, ty: number | string, tz: number | string): Animation;
skew(ax: number | string, ay?: number | string): Animation;
skewX(angle: number | string): Animation;
skewY(angle: number | string): Animation;
matrix(a: number, b: number, c: number, d: number, tx: number, ty: number): Animation;
matrix3d(a1: number, b1: number, c1: number, d1: number, a2: number, b2: number, c2: number, d2: number, a3: number, b3: number, c3: number, d3: number, a4: number, b4: number, c4: number, d4: number): Animation;
step(options?: AnimationStepOptions): Animation;
export(): AnimationData;
}
interface AnimationStepOptions {
duration?: number;
timingFunction?: string;
delay?: number;
transformOrigin?: string;
}
interface AnimationData {
actions: any[];
}Usage Example:
// Create bouncing animation
const animation = uni.createAnimation({
duration: 1000,
timingFunction: 'ease-in-out'
});
animation
.scale(1.2)
.rotate(45)
.step()
.scale(1)
.rotate(0)
.step();
// Apply animation to component
this.animationData = animation.export();Control page scrolling behavior.
/**
* Scroll page to specific position
* @param options - Scroll options
*/
function pageScrollTo(options: PageScrollToOptions): void;
interface PageScrollToOptions {
scrollTop?: number;
selector?: string;
offsetTop?: number;
duration?: number;
success?: (result: any) => void;
fail?: (error: any) => void;
complete?: () => void;
}Control pull-to-refresh functionality.
/**
* Start pull-down refresh
*/
function startPullDownRefresh(): void;
/**
* Stop pull-down refresh
*/
function stopPullDownRefresh(): void;Set page background appearance.
/**
* Set background color
* @param options - Background color options
*/
function setBackgroundColor(options: SetBackgroundColorOptions): void;
/**
* Set background text style
* @param options - Background text style options
*/
function setBackgroundTextStyle(options: SetBackgroundTextStyleOptions): void;
interface SetBackgroundColorOptions {
backgroundColor?: string;
backgroundColorTop?: string;
backgroundColorBottom?: string;
success?: (result: any) => void;
fail?: (error: any) => void;
complete?: () => void;
}
interface SetBackgroundTextStyleOptions {
textStyle: 'dark' | 'light';
success?: (result: any) => void;
fail?: (error: any) => void;
complete?: () => void;
}interface SetTabBarStyleOptions {
color?: string;
selectedColor?: string;
backgroundColor?: string;
borderStyle?: 'black' | 'white';
success?: (result: any) => void;
fail?: (error: any) => void;
complete?: () => void;
}
interface HideTabBarOptions {
animation?: boolean;
success?: (result: any) => void;
fail?: (error: any) => void;
complete?: () => void;
}
interface ShowTabBarOptions {
animation?: boolean;
success?: (result: any) => void;
fail?: (error: any) => void;
complete?: () => void;
}
interface RemoveTabBarBadgeOptions {
index: number;
success?: (result: any) => void;
fail?: (error: any) => void;
complete?: () => void;
}
interface ShowTabBarRedDotOptions {
index: number;
success?: (result: any) => void;
fail?: (error: any) => void;
complete?: () => void;
}
interface HideTabBarRedDotOptions {
index: number;
success?: (result: any) => void;
fail?: (error: any) => void;
complete?: () => void;
}