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

This article will explain in detail the example analysis of developing ruler components based on uni-app. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

I. Preface

The editor recently received a task to no longer use the traditional keyboard when entering values, but to select values by dragging a ruler, something like this:

In fact, this requirement is not put forward for the first time, and the product wanted to do this in the first version of our application.

Of course, I refused when I first received this task. You can't let me do it, so I'll do it right away. First of all, I want to do some research, because I don't want to spend so much time and cost to develop this component and add some special effects.

Sliding over the edge can still duang and bounce back, but in practice it is not as convenient as typing numbers directly on the keyboard, so the leader will certainly scold me. After some research and time evaluation, I finally chose another set of plan:

I wrote a set of numeric keyboard, which is much simpler than the scale, does not consume much performance, and is quite convenient to use.

Why not use the system's own keyboard? Needless to say, everyone knows how disgusting it is that the mobile browser calling system has its own keyboard.

However, the app ushered in a second version, and the product took out the scale and threatened: "if you want to cut the demand, cut me first!" .

However, it is true that the second edition has a more complex scenario, the selected values need to be limited, and the size of the range will change with some conditions, so it can only be a scale for users to enter the correct values intuitively and quickly.

Then after two minutes of deliberation, the editor finally took over the task.

II. Development

First of all, let's take a look at the characteristics of the scale.

Can be slid

Output values according to sliding distance

If it slips too far, it will rebound automatically.

It seems that we can develop based on the scroll-view component provided by uni-app, which has a scale feature that provides the following properties that suit us:

The default value of the property name type indicates that scroll-xBooleanfalse allows horizontal scrolling scroll-leftNumber/String to set horizontal scroll bar position scroll-with-animationBooleanfalse triggers when setting scroll bar position using animation transition @ scrollEventHandle, event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

Then the second step is to calculate the scale.

The editor has set up a default of 10 pixels for each scale.

Const GUTTER = 10

Then we start to calculate the total number of scales we need, which is actually very simple, that is, how many scales you need, then pass in a maximum and minimum value, and then subtract the minimum value from the maximum value, which is the number of scales.

At this time, there will be an interactive problem, because the selection mark of the scale is placed in the middle of the screen, so the boundary of the scale needs to show extra scales to fill the screen. So the editor decided to generate an extra scale equal to twice the width of the screen.

/ / the number of extra ticks const extraGridCount = Math.ceil (window.innerWidth / GUTTER); / / generate the scale array this.gridList = Array.from (Array (this.gridMax-this.gridMin + extraGridCount * 2). Map ((_, I) = > {const num = I + this.gridMin-extraGridCount; const displayNum = this.decimal = 1? Num / 10: num; return {num, displayNum, isLongGrid: num% GUTTER = 0, showText: num% GUTTER = = 0 & & num > = this.gridMin & & num this.gridMax) {value = this.gridMax;}}

OffsetScroll is the superfluous part of the scale, which needs to be subtracted, and it is necessary to judge whether it is less than the minimum value or greater than the maximum value. Next is the rebound of the scale. When the slide exceeds the maximum or minimum value, it needs to bounce back, which is visually consistent with the calculated value. In fact, it's just to calculate whether the scale should go back to the boundary at the end of the slide. Scroll-view has already solved it for us in the animation.

AdjustScrollPosition () {/ * * adjust scrolling position after scrolling ends * / if (this.actualScrollLeft

(this.gridMax-this.gridMin) * GUTTER + this.offsetScroll) {this.scrollLeft = (this.gridMax-this.gridMin) * GUTTER + this.offsetScroll + (Math.random () / 100);} else if (Math.floor (this.actualScrollLeft-this.offsetScroll)% GUTTER! = 0) {const dryScrollLeft = this.actualScrollLeft-this.offsetScroll; this.scrollLeft = dryScrollLeft-dryScrollLeft% GUTTER + this.offsetScroll }} this is the end of the article on "sample Analysis of developing scale components based on uni-app". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.