cocos2d-js-2.2 ScrollView + Scroll Strip development notes

In recent projects to use the slider with a scrollbar, all of their own simple package of a scroll bar, with ScrollView to use, 2.2 version of the engine is too old, but the project to use no way, the new version of the engine should be more simple

The approximate idea is:

1. Gets the contentsize height of the ScrollView and the Viewsizie height of the ScrollView, creates a scrollbar, calculates the height of the scrollbar's background bar (equals the viewsize height) and the scrollbar height by the previous two values ( viewsizeheight/(contentsizeheight/viewsizeheight)))

In the 2.scrollViewDidscroll method, the y-coordinate of the contentoffsize on the ScrollView is continuously obtained, Align the scrollbar coordinates with the ScrollView's scrollable area (i.e., the difference between the ScrollView's contentsize height and the viewsize of the ScrollView)

The Sliderbar code is as follows:

/**
* Created by Dong on 2014/9/28 0011.
*
* scroll bar on the slider, with rebound effect
*/
var sliderbar = cc. Node.extend ({
_sliderfilename:null,//scroll bar picture path
_backgroundfilename:null,//scroll bar background map path
_bgsize:null,//The area shown in the drawing strip background
_multiple:null,//slider display area and total area ratio
_slidersize:null,//slide bar display Area
_bgsprite:null,//Background Sprite
_slidersprite:null,//scroll bar Sprite
_beginpos:null,//Starting position of the scroll bar
_endpos:null,//final position of scroll bar

Ctor:function (Sliderfilename, Backgroundfilename, bgsize, multiple) {
This._super ();

if (!sliderfilename | |!backgroundfilename) {
Cc.log ("Wrong args,check it!");
}
This._sliderfilename = Sliderfilename;
This._backgroundfilename = Backgroundfilename;
This._bgsize = bgsize;
This._multiple = multiple;

if (!this.init ()) {
return false;
}
},

Init:function () {
This._bgsprite = cc. Scale9sprite.create (This._backgroundfilename);
This._bgsprite.setcontentsize (Cc.size (This._bgsprite.getcontentsize (). width, this._bgsize.height));
This.addchild (This._bgsprite);

This._slidersprite = cc. Scale9sprite.create (This._sliderfilename);
This._slidersprite.setcontentsize (Cc.size (This._slidersprite.getcontentsize (). width, this._bgsize.height/this._ multiple));
This.addchild (This._slidersprite);

This._beginpos = CC.P (0,-THIS._BGSIZE.HEIGHT/2 + this._slidersprite.getcontentsize (). HEIGHT/2);
This._endpos = CC.P (0, THIS._BGSIZE.HEIGHT/2-this._slidersprite.getcontentsize (). HEIGHT/2);
This._slidersize = This._slidersprite.getcontentsize ();
This._slidersprite.setposition (This._beginpos);

return true;
},

Setvalue:function (value) {

Activities within normal range
if (value >= 0 && value <= 1) {
Re-location
This._slidersprite.setcontentsize (this._slidersize);
This._slidersprite.setposition (CC.P (0, This._beginpos.y + (THIS._ENDPOS.Y-THIS._BEGINPOS.Y) * value));
}
Swipe to the bottom side
else if (value < 0 && value >-0.8) {
var condownvalue = this._slidersize.height + value * this._slidersize.height;
if (Condownvalue < 100) {
Return
}
var movebeginposy = this._beginpos.y + value * THIS._SLIDERSIZE.HEIGHT/2;
Movebeginposy = Movebeginposy <-THIS._BGSIZE.HEIGHT/2? -THIS._BGSIZE.HEIGHT/2: Movebeginposy;
This._slidersprite.setcontentsize (Cc.size (This._slidersize.width, Condownvalue));
This._slidersprite.setposition (CC.P (0, Movebeginposy));
}
Swipe to the top side
else if (value > 1 && value < 1.8) {
var conupvalue = this._slidersize.height + (1-value) * this._slidersize.height;
if (Conupvalue < 100) {
Return
}
var moveendposy = this._endpos.y-(1-value) * THIS._SLIDERSIZE.HEIGHT/2;
Moveendposy = moveendposy > THIS._BGSIZE.HEIGHT/2? THIS._BGSIZE.HEIGHT/2: Moveendposy;
This._slidersprite.setcontentsize (Cc.size (This._slidersize.width, Conupvalue));
This._slidersprite.setposition (CC.P (0, Moveendposy));
}
},
Refresh Progress bar Status
Refreshsliderstatus:function (Bgsize, multiple) {
This._bgsize = bgsize;
This._multiple = multiple;
This._bgsprite.setcontentsize (Cc.size (This._bgsprite.getcontentsize (). width, this._bgsize.height));
This._slidersprite.setcontentsize (Cc.size (This._slidersprite.getcontentsize (). width, this._bgsize.height/this._ multiple));
This._beginpos = CC.P (0,-THIS._BGSIZE.HEIGHT/2 + this._slidersprite.getcontentsize (). HEIGHT/2);
This._endpos = CC.P (0, THIS._BGSIZE.HEIGHT/2-this._slidersprite.getcontentsize (). HEIGHT/2);
This._slidersize = This._slidersprite.getcontentsize ();
This._slidersprite.setposition (This._beginpos);//Standby
},
Set transparency
Setopacity:function (value) {
var children = This.getchildren ();
for (var k = 0; k < children.length; k++) {
Children[k].setopacity (value);
}
},
Set hidden
Setvisible:function (BVIs) {
var children = This.getchildren ();
for (var k = 0; k < children.length; k++) {
Children[k].setvisible (BVIs);
}
},
Gradient disappears
Runfadeoutaction:function (value) {
var children = This.getchildren ();
for (var k = 0; k < children.length; k++) {
var fadeout = cc. Fadeout.create (value);
Children[k].runaction (fadeout);
}
},
Gradient appears
Runfadeinaction:function (value) {
var children = This.getchildren ();
for (var k = 0; k < children.length; k++) {
var Fadein = cc. Fadein.create (value);
Children[k].runaction (Fadein);
}
},
Stop action
Stopallactions:function () {
var children = This.getchildren ();
for (var k = 0; k < children.length; k++) {
Children[k].stopallactions ();
}
},
Onenter:function () {
This._super ();
},
Onexit:function () {
This._super ();
}
});

How to use:

Create scroll bar

This._slider = new Sliderbar (slider_track_png, Slider_thumb_png, This._scrollview.getviewsize (), this._ Scrollview.getcontentsize (). Height/this._scrollview.getviewsize (). height);

This._slider.setposition (CC.P (winsize.width-40, WINSIZE.HEIGHT/2 + 15));
This._slider.setvalue (0.01); Ensure that scroll bars are at the bottom when initializing scrollbars
This._bglayer.addchild (This._slider, 20);

The scroll bar is then constantly updated in the Scrollviewdidview method:

Scrollviewdidscroll:function (view) {
Y-axis relative moving distance
var offposy = This._scrollview.getcontentoffset (). Y;
Scrollable area size, calculating scroll bar position and height
var scrollheight = This._scrollview.getcontentsize (). Height-this._scrollview.getviewsize (). Height;
var present =-(offposy/scrollheight);
Continuously corrects scroll bar position and height according to the slider movement distance
if (This._slider) {
This._slider.setvalue (present);
}
}

Because my demand is scrollview above the number of cells always refreshed, so also did some other processing, here is not written out, today's notes to this end

cocos2d-js-2.2 ScrollView + Scroll Strip development notes