uniapp flow bar

Uniapp is a cross-platform application development framework developed based on the Vue.js framework, supporting the development of multiple mobile platforms and web applications. Among them, the process bar is a common UI control that can be used to display the current operation progress, display task completion status, etc. In Uniapp, the use of flow bars is also very simple.

1. Basic use of flow bar

Uniapp provides uni-progress component to realize the function of flow bar. You can use the flow bar through the following steps:

1. Make the uni-progress component a subcomponent of a page.

<template>
  <view>
    <uni-progress :percent="50"></uni-progress>
  </view>
</template>

2. Set the percent property to set the progress percentage of the process bar. For example, setting percent to 50 would indicate that the progress bar is halfway complete.

<uni-progress :percent="50"></uni-progress>

3. You can beautify the flow bar through styles. For example, you can set the color property to change the color of the process bar, and set the activeColor property to change the color of the progress bar.

<uni-progress :percent="50" color="#CCCCCC" activeColor="#47a1ff"></uni-progress>

2. The use of progress ring

The progress ring is a special type of flow bar, which is also implemented in Uniapp using uni-progress of. The style of the progress ring can be changed by setting the active-mode property.

1. Use the active-mode attribute to set the style of the progress ring, set it to 'round'.

<uni-progress :percent="50" active-mode="round"></uni-progress>

2. You can adjust the line width of the progress ring by setting the stroke-width property.

<uni-progress :percent="50" active-mode="round" stroke-width="10"></uni-progress>

3. You can change the color of the progress ring by setting the stroke-color property.

<uni-progress :percent="50" active-mode="round" stroke-width="10" stroke-color="#47a1ff"></uni-progress>

3. Use slots to customize the flow bar

In addition to using the default style, Uniapp also supports using slots to customize the style of the flow bar. By defining elements with the slot attribute, you can insert custom content into the flow bar.

1. Use the default slot to customize the style of the process bar, that is, insert a piece of text in the middle of the progress bar.

<uni-progress :percent="50">
  <view slot="default">50%</view>
</uni-progress>

2. Slot content can be added to the left or right side by setting slot="left" or slot="right" is enough.

<uni-progress :percent="50">
  <view slot="left">开始</view>
  <view slot="right">完成</view>
</uni-progress>

4. Use JS to dynamically change the progress of the process bar

It is also very simple to use JS to dynamically change the progress of the process bar in Uniapp. You can change the progress of the progress bar by getting an instance of the progress bar component and then calling the setPercent method.

1. First you need to add a ref attribute to the progress bar component so that its instance can be obtained.

<uni-progress ref="myProgress" :percent="50"></uni-progress>

2. Get the instance of the progress bar component through this.$refs.myProgress, and then call the setPercent method to change the progress of the progress bar .

this.$refs.myProgress.setPercent(80);

To sum up, the flow bar in Uniapp is very convenient and practical, supporting multiple styles and customized content. At the same time, it is very simple to use JS to dynamically change the progress of the progress bar. In project development, the use of flow bars can easily display the current operation progress or task completion status, improve user interaction experience, and is worthy of reference by developers.

The above is the detailed content of uniapp flow bar. For more information, please follow other related articles on the PHP Chinese website!