uni-halo/.agents/skills/uni-app/references/feature-ui-feedback.md

name, description

name	description
UI Feedback	Toast, modal, loading, and action sheet APIs

UI Feedback

Toast Messages

uni.showToast

Display success/error messages.

// Success toast
uni.showToast({
  title: 'Success!',
  icon: 'success',
  duration: 2000,
  mask: false
})

// Loading toast
uni.showToast({
  title: 'Loading...',
  icon: 'loading',
  duration: 10000
})

// Text only (no icon)
uni.showToast({
  title: 'Please wait',
  icon: 'none',
  duration: 2000
})

// Error toast
uni.showToast({
  title: 'Failed!',
  icon: 'error'
})

Parameters:

Parameter	Type	Default	Description
title	String	Required	Message text
icon	String	success	success/loading/none/error
duration	Number	1500	Duration in ms
mask	Boolean	false	Prevent touch during display
position	String		top/center/bottom (App)

uni.hideToast

uni.hideToast()

Loading

uni.showLoading

uni.showLoading({
  title: 'Loading...',
  mask: true // Prevent interaction
})

// Hide after operation
setTimeout(() => {
  uni.hideLoading()
}, 2000)

uni.hideLoading

uni.hideLoading()

Modal Dialogs

uni.showModal

Alert and confirm dialogs.

// Alert (single button)
uni.showModal({
  title: 'Notice',
  content: 'Operation completed',
  showCancel: false
})

// Confirm (two buttons)
uni.showModal({
  title: 'Confirm',
  content: 'Are you sure?',
  cancelText: 'Cancel',
  cancelColor: '#999',
  confirmText: 'Confirm',
  confirmColor: '#007AFF',
  success: (res) => {
    if (res.confirm) {
      console.log('User confirmed')
    } else if (res.cancel) {
      console.log('User cancelled')
    }
  }
})

// Editable modal
uni.showModal({
  title: 'Input',
  content: 'Enter your name',
  editable: true,
  placeholderText: 'Name',
  success: (res) => {
    if (res.confirm) {
      console.log('Input:', res.content)
    }
  }
})

Action Sheet

uni.showActionSheet

Bottom action menu.

uni.showActionSheet({
  itemList: ['Take Photo', 'Choose from Album', 'Cancel'],
  itemColor: '#000000',
  success: (res) => {
    // res.tapIndex: 0, 1, 2...
    console.log('Selected:', res.tapIndex)
    switch (res.tapIndex) {
      case 0:
        this.takePhoto()
        break
      case 1:
        this.chooseFromAlbum()
        break
    }
  },
  fail: (err) => {
    console.log('Cancelled')
  }
})

Pull to Refresh

Enable in pages.json

{
  "pages": [{
    "path": "pages/index/index",
    "style": {
      "enablePullDownRefresh": true,
      "backgroundTextStyle": "dark"
    }
  }]
}

Handle in Page

export default {
  onPullDownRefresh() {
    console.log('Pull down triggered')
    this.refreshData().finally(() => {
      uni.stopPullDownRefresh()
    })
  }
}

Programmatic Control

// Start pull refresh
uni.startPullDownRefresh()

// Stop pull refresh
uni.stopPullDownRefresh()

Navigation Bar Loading

// Show loading in nav bar
uni.showNavigationBarLoading()

// Hide loading
uni.hideNavigationBarLoading()

Tab Bar Operations

Show/Hide Tab Bar

// Hide tab bar
uni.hideTabBar({
  animation: true
})

// Show tab bar
uni.showTabBar({
  animation: true
})

Set Tab Bar Style

uni.setTabBarStyle({
  color: '#999',
  selectedColor: '#007AFF',
  backgroundColor: '#fff',
  borderStyle: 'black'
})

Set Tab Bar Item

uni.setTabBarItem({
  index: 0,
  text: 'Home',
  iconPath: '/static/home.png',
  selectedIconPath: '/static/home-active.png'
})

Add/Remove Tab Bar Badge

// Show badge
uni.showTabBarRedDot({
  index: 2 // Tab index
})

// Hide badge
uni.hideTabBarRedDot({
  index: 2
})

// Set badge text
uni.setTabBarBadge({
  index: 2,
  text: '5'
})

// Remove badge text
uni.removeTabBarBadge({
  index: 2
})

Preview Image

uni.previewImage({
  current: 'https://example.com/1.jpg', // Current image
  urls: [
    'https://example.com/1.jpg',
    'https://example.com/2.jpg',
    'https://example.com/3.jpg'
  ],
  indicator: 'default', // default/number/none
  loop: false,
  longPressActions: {
    itemList: ['Save Image', 'Share'],
    success: (data) => {
      console.log('Long press:', data.tapIndex)
    }
  }
})

Save Image to Photos

uni.saveImageToPhotosAlbum({
  filePath: 'temp://path/to/image.jpg',
  success: () => {
    uni.showToast({ title: 'Saved' })
  }
})

Best Practices

Toast Helper

const toast = {
  success(message, duration = 2000) {
    uni.showToast({ title: message, icon: 'success', duration })
  },
  error(message, duration = 2000) {
    uni.showToast({ title: message, icon: 'error', duration })
  },
  loading(message = 'Loading...') {
    uni.showLoading({ title: message, mask: true })
  },
  hide() {
    uni.hideLoading()
    uni.hideToast()
  },
  text(message, duration = 2000) {
    uni.showToast({ title: message, icon: 'none', duration })
  }
}

// Usage
toast.loading()
fetchData()
  .then(() => toast.success('Loaded'))
  .catch(() => toast.error('Failed'))
  .finally(() => toast.hide())

Modal Helper

const modal = {
  confirm(title, content) {
    return new Promise((resolve) => {
      uni.showModal({
        title,
        content,
        success: (res) => resolve(res.confirm)
      })
    })
  },

  alert(title, content) {
    return new Promise((resolve) => {
      uni.showModal({
        title,
        content,
        showCancel: false,
        success: () => resolve()
      })
    })
  },

  action(items) {
    return new Promise((resolve, reject) => {
      uni.showActionSheet({
        itemList: items,
        success: (res) => resolve(res.tapIndex),
        fail: reject
      })
    })
  }
}

// Usage
async function deleteItem(id) {
  const confirmed = await modal.confirm('Delete', 'Are you sure?')
  if (confirmed) {
    await api.delete(id)
    toast.success('Deleted')
  }
}