Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how WeChat Mini Programs realizes the graphic style function of process progress". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how WeChat Mini Programs realizes the graphic style function of process progress" can help you solve your doubts.

The diagram style that implements the progress of a process is as follows

Demand:

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 is 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" processArr [I] .end = "# 45B2FE"} else {processArr [I] .icon = ".. /.. / img/process_1.png" Arr [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 } after reading this, the article "how to achieve the graphic style function of process progress by WeChat Mini Programs" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow 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.