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

This article mainly introduces "how to realize WeChat Mini Programs canvas interval sliding selection". In daily operation, I believe that many people have doubts about how to realize WeChat Mini Programs canvas interval sliding selection. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "WeChat Mini Programs canvas interval sliding selection". Next, please follow the editor to study!

The target js file is introduced using import; then write in onLoad () {} for example: this.selectInterval = new selectInterval ({attribute})

This.selectInterval = new SelectInterval ({the canvasId:'canvas', value must be the value canvasHeight:100 of the canvas-id property of the canvas component, the value must be the height of the current canvas Xaxis: {left:30,right:345}, {left:30, the left end of the bar right:345, the right end of the bar} (right must be greater than left, if the default value is not passed) scale: [10, 20, 30], scale Array type, the value is incremented with an invariant as a constant The subtraction of any two front and back values of the array should always be equal to this constant. If the first value of the array is not 0, a 0 will be added in front of the array by default, but the value of 0 will not be displayed on canvas. (when the length of the array is 2, you can set any value greater than zero, but the second value must be greater than the first value.) Yaxis: [125jue 5], scale value Array type. The first value is the starting height of the drawn bar, and the second value is the height of the bar itself (if the default [125jue 5] is not passed) manner:true. Toggle whether the top of the sliding point follows the ball when sliding. If the value is false, then the minimum value and the maximum value bothEndsNear:310 obtained by interval sliding can be clearly displayed. You can set the distance between the scale value and the beginning and end point of the bar. Do not pass the default center / / decimalPoint:10, scale value / decimalPoint, you can make the scale value decimal, must be a multiple of 10, can not pass / / rightSliderStop:2, the value is a Boolean, or you can fill in number when the value of manner is true. The value of number is the difference between the maximum value and the minimum value. After setting, the two sliding points will not slide to a distance less than this number showTitle: {name:'km', String type, used to set the unit size:15, the label font size, the font color of the Number type title:'#1384e0', header label or the font color inside the ball, the String type positionX:100, the horizontal position of the label font in canvas, and the Number type Only when manner is false or does not pass positionY:80, label font or ball in the vertical position of canvas, Number type isfollow: {follow the setting of the size and color of the ball, the value of manner is false or not, this attribute can not be given to view:true, when the value of manner is true View must be trueroundSize:12, ball size roundColor:'rgba (10,113,238,0.8) 'ball color}}, (if the header label is not displayed) scaleIn: {name:'km', String type, used to set unit size:10, control scale value font size, Number type valueY:108, scale value in canvas ordinate position, Number type pointY:113 scale point in canvas ordinate position, Number type} (if you do not pass the scale value, it will not be displayed) colour: {colorBar: ['# e5e5e5march grammar '1384e0'], the color of the bar, the Array type, the first is the background color of the bar, the second is the color of the range roundColor: [' # ffffff','#e5e5e5'], the circle color, the Array type, the first is the color of the circle, and the second is the border color of the circle scale: ['# 000000000, the font color of the scale value} (the above default parameter will be displayed if you do not pass it) selectedInterval: {min:15,max:23}, (min cannot be equal to max, if it is not passed, it will only be displayed at both ends of the bar) round: {radius:10,edgeLine:2}, (if you do not pass the default circle, the radius is 10, the frame is 2) / / image: {/ / the local path value of url:'../../assets/image/spot-a.png', image is String type The value can be an array But if it is an array, the length of the array must be 2 width:20 / width:20, set the width of the picture / / height:24, set the height of the picture / /}, (if it does not display the picture) followValue: {name:'', String type, used to set the unit color:'#f8835f',size:10, set the font size leftY:151, with the value in the vertical position of the canvas rightY:151} (if not passed will not display the following value)}) The following attributes must be created in / * * Page ({})

Custom (e) {bindtouchstart

This.selectInterval.move (e.changedTouches [0] .x, e.changedTouches [0] .y)

}

Custom (e) {bindtouchmove

This.selectInterval.meter (e.changedTouches [0] .x)

}

Custom (e) {bindtouchend

This.selectInterval.texthints ((min,max) = > {

The value returned by parameter min/max is the minimum / maximum price, and max returns null if it exceeds the maximum value.

Console.log (min,max)

}, true); when the value of the manner attribute is true, the true of the second parameter of this function will be passed, but the result will be different.

}

Canvas css style width:100%;box-sizing: border-box;height: custom rpx

At this point, the study of "how to realize WeChat Mini Programs canvas interval sliding selection" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.