cocos2d-js-2.2 scrollView +滾動條 開發筆記

最近項目中要用到帶滾動條的滑塊，全部本身簡單的封裝了一個滾動條，配合scrollView來使用,2.2版本的引擎太古老了，可是項目要用沒辦法，新版本引擎應該更簡單

大概思路是:

1.獲取到scrollView的contentSize高度以及scrollView的viewSizie高度,建立一個滾動條，經過前面兩個值，計算出滾動條的背景條高度（等於viewSize高度）和滾動條高度(viewSizeHeight/(contentSizeHeight/viewSizeHeight)))

2.scrollViewDidscroll方法中，不斷獲取scrollView上的contentOffSize的y座標，與scrollView的可滾動區域（便是用scrollView的contentSize高度與scrollView的viewSize做差）作比值，來校訂滾動條座標

 

sliderBar代碼以下:

/**
* Created by dong on 2014/9/28 0011.
*
* 滑塊上的滾動條，帶回彈效果
*/
var SliderBar = cc.Node.extend({
_sliderFileName: null, //滾動條圖片路徑
_backgroundFileName: null, //滾動條背景圖路徑
_bgSize: null, //畫條背景圖顯示的區域
_multiple: null, //滑塊顯示區域與總區域比例
_sliderSize: null, //滑條顯示區域
_bgSprite: null, //背景sprite
_sliderSprite: null, //滾動條sprite
_beginPos: null, //滾動條的起始位置
_endPos: null, //滾動條的最終位置

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) {

//正常範圍內活動
if (value >= 0 && value <= 1) {
//重定位
//this._sliderSprite.setContentSize(this._sliderSize);
this._sliderSprite.setPosition(cc.p(0, this._beginPos.y + (this._endPos.y - this._beginPos.y) * value));
}
//滑動到最下側
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));
}
//滑動到最上側
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));
}
},
//刷新進度條狀態
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);//備用
},
//設置透明度
setOpacity: function (value) {
var children = this.getChildren();
for (var k = 0; k < children.length; k++) {
children[k].setOpacity(value);
}
},
//設置隱藏
setVisible: function (bVis) {
var children = this.getChildren();
for (var k = 0; k < children.length; k++) {
children[k].setVisible(bVis);
}
},
//漸變消失
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);
}
},
//漸變出現
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);
}
},
//中止動做
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();
}
});

 

使用方法:

建立滾動條

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); //初始化滾動條時，保證滾動條在最下方
this._bgLayer.addChild(this._slider, 20);

//而後在scrollVIewDidView方法中不斷更新滾動條:

scrollViewDidScroll: function (view) {
//Y軸相對移動距離
var offPosY = this._scrollView.getContentOffset().y;
//可滾動的區域大小，計算滾動條位置和高度用
var scrollHeight = this._scrollView.getContentSize().height - this._scrollView.getViewSize().height;
var present = -(offPosY / scrollHeight);
//根據滑塊移動距離不斷校訂滾動條位置以及高度
if (this._slider) {
this._slider.setValue(present);
}
}

因爲個人需求是scrollView上面的cell數量時時刷新的,因此還作了一些其餘處理，這裏就不寫出來了，今天的筆記到此結束