The mPaaS Mini Program provides three information display components — List, Notice bar, and Step bar — each designed for a specific content type and context. Use them to present structured information clearly and help users navigate your app efficiently.
List
Use a List to group related information and actions around a single subject. Each row can link to a detail page, and the list scrolls vertically when content exceeds the screen height.
Visual style
A list item consists of a title, a subtitle, and an optional icon.
Example
A function collection page is a common use case. The list presents all available functions on one screen, letting users scan and navigate to the one they need.
Notice bar
The notice bar sits between the navigation bar and the page content. Use it to surface important announcements that users must see before interacting with the page — such as planned maintenance or temporary service interruptions.
When to use
Reserve the notice bar for high-priority, time-sensitive alerts — for example, a bank channel that will be unavailable during a specific window. Do not use it for general promotions, as this erodes user trust in genuine alerts.
Guidelines for notice bar copy:
Keep the announcement text within the screen width. Truncate overflow with "…" rather than wrapping to a second line.
Once a user taps to view or dismisses an announcement, do not show the same message again.
Reserve the notice bar for system-level or service-level alerts, not promotional content.
If an announcement has more detail, users can tap it to open a detail page. The notice bar disappears when they return.
Visual style
The notice bar supports two dismissal controls: an arrow that opens the detail page, and a close button.
When the user taps the arrow and navigates to the detail page, the notice bar is dismissed on return.
When the user taps the close button, the notice bar is dismissed immediately.
Step bar
Use a Step bar when a task spans multiple steps or pages. It shows users the total number of steps and the current step.
When to use
The step bar communicates the structure of a multi-step process: how many steps there are, the order they follow, and where the user currently stands. When steps span separate pages, the step bar also serves as a navigation aid.
Example
Credit card repayment is a typical use case. After the user submits a payment, the system needs time to process the transaction. The step bar on the result page makes the pending state visible and confirms that the task is in progress.
