Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how Mini Program can achieve the function of the process progress bar. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article, let's take a look at it.

To achieve the Mini Program process progress bar requirements:

The unfinished gray dots indicate

Completed using blue dot settings

The current state is represented by a small dot with an outer circle

It is relatively simple to implement. The idea is to use a list to implement. The style of each item in the list is as follows

It doesn't look good when you use a win10 drawing board.

What the picture means is that each item has a line in front of it with a circle in the middle and a line behind it. This is because the following text needs to be centered below the circle. If you don't need text, it's easier to have a circle followed by a straight line.

According to the picture above, the html layout is as follows

{{item.name}}

The OK list definitely needs an array. The array is like the following

ProcessData: [{name: 'submit work order', start:'# fff', end:'# EFF3F6', icon:'.. / img/process_1.png'}, {name: 'received order', start:'# EFF3F6', end:'# EFF3F6', icon:'.. / img/process_1.png'} {name: 'start maintenance', start:'# EFF3F6', end:'# EFF3F6', icon:'.. / img/process_1.png'}, {name: 'maintenance over', start:'# EFF3F6', end:'# EFF3F6', icon:'.. /.. / img/process_1.png'} {name: 'confirmed', start:'# EFF3F6', end:'# fff', icon:'.. /.. / img/process_1.png'}],}

According to the above item picture, we will see that if it is displayed directly, there will be more than one line on both sides to remove the two lines. It is very simple to let the background color of the parent container be the same as the previous color.

Change the background of the parent layout to white, and then control that the front segments in the first item in the list are white, and the last item segments are white. In this way, it looks like the line segments on both sides are removed.

When the data changes, we just need to change the properties of the objects in the array. Not as good as the following for reference

/ / status of the progress bar setPeocessIcon: function () {var index = 0max / record the last position with status 1 var processArr = this.data.processData / / console.log ("progress", this.data.detailData.progress) for (var I = 0; I < this.data.detailData.progress.length) Item.word if +) {var item = this.data.detailData.progress [I] processArr [I] name = item.word if (item.state = = 1) {index = I processArr [I] .icon = ".. /.. / img/process_3.png" processArr [I] .start = "# 45B2FE" proce ssArr [I] .end = "# 45B2FE"} else {Arr [I ]. Icon = ".. /.. / img/process_1.png" processArr [I] .start = "# EFF3F6" processArr [I] .end = "# EFF3F6"}} processArr [index] .icon = ".. /.. / img/process_2.png" processArr [index] .end = "# EFF3F6" processArr [0] .start = "# fff" processArr [this.data.detailData.progress.length- 1] .end = "# fff" this.setData ({processData: processArr})}

In the data in the above code, state is used to represent completed and unfinished. We set the finished ones to blue and the unfinished ones to gray.

Use index to record whether it is the current point (the current point is the last one completed by state).

Finally, the code in css is also very simple.

.order _ process {display: flex; flex-wrap: nowrap; padding: 10rpx 10rpx 20rpx 10rpx; background-color: # fff;}. Process_wrap {display: flex; flex-direction: column; flex: 1; align-items: center;}. Process {display: flex; align-items: center; width: 100%;} .process_icon {width: 50rpx; height: 50rpx;} .process_line {background: # eff3f6; flex: 1; height: 5rpx }. Process_name {font-size: 24rpx;} these are all the contents of the article "how to achieve the process progress bar function of Mini Program". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.