一个极其复杂的cocos creator scrollview的例子...
// Learn cc.Class:
// - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
// - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
// - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
// - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
// - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html
cc.Class({
extends: cc.Component,
properties: {
},
onLoad () {
cc.debug.setDisplayStats(false);
//cc.director.setClearColor(cc.color(255, 255, 255, 255));
console.log("challenge onload")
let windowSize=cc.view.getVisibleSize();
this._screenWidth = windowSize.width
this._screenHeight = windowSize.height
this._hwRate = this._screenHeight/this._screenWidth
console.log("屏幕长宽比:"+this._hwRate)
var common = require('Common');
this.UIStartY = common.loadBg(this.node)
this.loadTools(this._screenWidth,this._screenHeight)
//加载背景
var frame_bgRank = new cc.SpriteFrame(cc.url.raw('resources/bg1.png'));
this.frame_pk = new cc.SpriteFrame(cc.url.raw('resources/pks.png'));
var bgRank = new cc.Node()
var bgRankSp = bgRank.addComponent(cc.Sprite)
bgRankSp.sizeMode = 'CUSTOM'
bgRankSp.spriteFrame = frame_bgRank
var rankBgHeight = this._screenHeight*0.72
if(this._hwRate >= 1.8){
var rankBgHeight = this._screenHeight*0.65
}
var rankBgWidth = rankBgHeight*616/1002
bgRank.width = rankBgWidth
bgRank.height = rankBgHeight
bgRank.position = cc.p(0,0)
bgRank.parent = this.node
var title = new cc.Node()
this.titleLabel = title.addComponent(cc.Label)
this.titleLabel.string = "选择对手"
this.titleLabel.fontSize = 50
this.titleLabel.lineHeight = 55
this.titleLabel.verticalAlign = "CENTER"
var outline = title.addComponent(cc.LabelOutline);
outline.color = new cc.color(148, 82,55,255)
outline.width = 4
title.position = cc.p(0,bgRank.height/2*0.85)
title.parent = bgRank
var random = new cc.Node()
var frame_btn = new cc.SpriteFrame(cc.url.raw('resources/btnBg.png'));
var btnWidth = bgRank.width*0.55
var btnHeight = 161/482*btnWidth
var btnSp = random.addComponent(cc.Sprite)
btnSp.spriteFrame = frame_btn
btnSp.sizeMode = 'CUSTOM'
random.width = btnWidth
random.height = btnHeight
random.position = cc.p(0,-bgRank.height/2)
random.parent = bgRank
var randTxt = new cc.Node()
this.randTxtLabel = randTxt.addComponent(cc.Label)
this.randTxtLabel.string = "随机挑战"
this.randTxtLabel.fontSize = 45
this.randTxtLabel.lineHeight = 50
this.randTxtLabel.verticalAlign = "CENTER"
var outline2 = randTxt.addComponent(cc.LabelOutline);
outline2.color = new cc.color(148, 82,55,255)
outline2.width = 4
randTxt.position = cc.p(0,0)
randTxt.parent = random
var maskNode = new cc.Node()
maskNode.width = bgRank.width*0.9
maskNode.height = bgRank.height*0.74
this.maskShowHeight = maskNode.height
this.maskShowWidth = maskNode.width
var maskGraph = maskNode.addComponent(cc.Graphics)
maskGraph.fillColor = new cc.color(30,130,30,255)
maskGraph.roundRect(-maskNode.width/2,-maskNode.height/2,maskNode.width,maskNode.height,0);
maskGraph.fill();
maskNode.position = cc.p(0,-bgRank.height*0.02)
maskNode.parent = bgRank
var mask = maskNode.addComponent(cc.Mask)
mask.type = cc.Mask.Type.RECT
/*
//test mask
var testContent = new cc.Node()
testContent.width = this._screenWidth
testContent.height = this._screenHeight
var testGraph = testContent.addComponent(cc.Graphics)
testGraph.fillColor = new cc.color(130,30,70,255)
testGraph.roundRect(-testContent.width/2,-testContent.height/2,testContent.width,testContent.height,0);
testGraph.fill();
testContent.position = cc.p(0,0)
testContent.parent = this.maskNode
*/
var mycontent = new cc.Node()
mycontent.width = this._screenWidth
mycontent.height = this._screenHeight*2
/*
var testGraph = mycontent.addComponent(cc.Graphics)
testGraph.fillColor = new cc.color(130,30,70,255)
testGraph.roundRect(-this._screenWidth/2,-this._screenHeight/2,this._screenWidth,this._screenHeight,0);
testGraph.fill();
*/
mycontent.position = cc.p(0,0)
mycontent.parent = maskNode
this.mycontent = mycontent
var scroll = maskNode.addComponent(cc.ScrollView)
scroll.content = mycontent
scroll.horizontal = false
var handler = new cc.Component.EventHandler();
handler.target = this.node; //这个 node 节点是你的事件处理代码组件所属的节点
handler.component = "Challenge";//这个是脚本文件名
handler.handler = "callback";
scroll.scrollEvents.push(handler);
cc.loader.loadRes("my.ttf", cc.Font, (err, res)=>{
this.titleLabel.font = res;
this.randTxtLabel.font = res;
})
this.dataFlag = {
type:'ab',//上下位置关系
unit:10,
pageAbove:0,//包含玩家本人且排名高的最近的unit人
pageBelow:-1,//低于玩家排名的最近的unit人
//>=0 返回的数据 exp 增长 玩家本人在第一个
//<0 返回的数据 exp 递减
}
this.loadContent()
},
drawTables(data){
this.dataAbove = data['above'] //exp自增
this.dataBelow = data['below'] //exp自增
console.log("上半部分记录数:"+this.dataAbove.length)
console.log("上半部分记录数:"+this.dataBelow.length)
this.setLineHighlight()
this.aboveLines = []
this.belowLines = []
this.gapInLine = 20
this.contentHeight = (this.dataAbove.length+this.dataBelow.length)*this.lineHeight
var dataForA = []
var dataForB = []
if(this.dataFlag ['type'] == 'ab'){//a在上 b在下
dataForA = this.dataAbove
dataForB = this.dataBelow
}else{
dataForA = this.dataBelow
dataForB = this.dataAbove
}
//绘制a
this.drawHalfArea(dataForA,this.a,"a")
//绘制b
this.drawHalfArea(dataForB,this.b,"b")
//this.mycontent.height =
this.mycontent.position = cc.p(0,-this.maskShowHeight/2)
},
drawHalfArea(dataHalf,box,boxName){
var boxHeight = dataHalf.length * this.lineHeight
for(var i=0;i var item = dataHalf[i] var line = new cc.Node() if(boxName == "a"){ if(this.AEndLineHighlighted){ if(i%2 == 0){ var lineGraph = line.addComponent(cc.Graphics) lineGraph.fillColor = new cc.color(235, 189, 86,255) lineGraph.roundRect(-this.maskShowWidth/2,-this.lineHeight/2,this.maskShowWidth,this.lineHeight,0); lineGraph.fill(); } }else{ if(i%2 == 1){ var lineGraph = line.addComponent(cc.Graphics) lineGraph.fillColor = new cc.color(235, 189, 86,255) lineGraph.roundRect(-this.maskShowWidth/2,-this.lineHeight/2,this.maskShowWidth,this.lineHeight,0); lineGraph.fill(); } } }else{ if(this.BEndLineHighlighted){ if(i%2 == 0){ var lineGraph = line.addComponent(cc.Graphics) lineGraph.fillColor = new cc.color(235, 189, 86,255) lineGraph.roundRect(-this.maskShowWidth/2,-this.lineHeight/2,this.maskShowWidth,this.lineHeight,0); lineGraph.fill(); } }else{ if(i%2 == 1){ var lineGraph = line.addComponent(cc.Graphics) lineGraph.fillColor = new cc.color(235, 189, 86,255) lineGraph.roundRect(-this.maskShowWidth/2,-this.lineHeight/2,this.maskShowWidth,this.lineHeight,0); lineGraph.fill(); } } } var pk = new cc.Node() var pkSp = pk.addComponent(cc.Sprite) pkSp.spriteFrame = this.frame_pk pkSp.sizeMode = "CUSTOM" pk.width = this.lineHeight*0.7 pk.height = pk.width pk.position = cc.p(this.maskShowWidth/2-this.gapInLine-pk.width/2,0) pk.parent = line var name = new cc.Node() var nameLabel = name.addComponent(cc.Label) nameLabel.string = item['nickName'] nameLabel.verticalAlign = "CENTER" nameLabel.fontSize = Math.floor(this.lineHeight*0.3) name.color = new cc.color(153, 63, 22,255) name.position = cc.p((this.maskShowWidth/2-this.gapInLine*2-pk.width)/2,0) name.parent = line var pinji = new cc.Node() var pinjiLabel = pinji.addComponent(cc.Label) pinjiLabel.string = item['pinji'] pinjiLabel.verticalAlign = "CENTER" pinjiLabel.fontSize = nameLabel.fontSize-3 pinji.color = name.color pinji.position = cc.p((-this.maskShowWidth/2+this.gapInLine*2+pk.width)/2,this.lineHeight/4) pinji.parent = line var title = new cc.Node() var titleLabel = title.addComponent(cc.Label) titleLabel.string = item['title'] titleLabel.verticalAlign = "CENTER" titleLabel.fontSize = nameLabel.fontSize-4 title.color = name.color title.position = cc.p((-this.maskShowWidth/2+this.gapInLine*2+pk.width)/2,-this.lineHeight/4) title.parent = line var url = item['avatarUrl']+"?aaa=aa.jpg?idx="+i cc.loader.load(url, function(err, tex){ //cc.log('Should load a texture from external url: ' + (tex instanceof cc.Texture2D)); var fullUrl = tex.toString() var start = fullUrl.indexOf("?idx=")+5 var idx = parseInt(fullUrl.substr(start,fullUrl.length-start)) var frame = new cc.SpriteFrame(tex); var avaMask = new cc.Node() avaMask.width = this.lineHeight*0.7 avaMask.height = avaMask.width avaMask.position = cc.p(-this.maskShowWidth/2+this.gapInLine+avaMask.width/2,0) if(boxName == "a"){ avaMask.parent = this.aboveLines[idx] }else{ avaMask.parent = this.belowLines[idx] } var mask = avaMask.addComponent(cc.Mask) mask.type = cc.Mask.Type.ELLIPSE var ava = new cc.Node() var avaSp = ava.addComponent(cc.Sprite) ava.width = avaMask.width ava.height = avaMask.height avaSp.spriteFrame = frame avaSp.sizeMode = "CUSTOM" ava.parent = avaMask }.bind(this)); line.position = cc.p(0,-boxHeight/2+i*this.lineHeight+this.lineHeight/2) //line.position = cc.p(0,this.lineHeight/2+i*this.lineHeight) //boxHeight line.parent = box if(boxName == "a"){ this.aboveLines.push(line) }else{ this.belowLines.push(line) } } //console.log("boxName:"+boxName) if(this.dataFlag ['type'] == 'ab'){//a在上 b在下 if(boxName == "a"){ box.position = cc.p(0,this.offset+boxHeight/2) }else{ box.position = cc.p(0,-this.offset-boxHeight/2) } }else{ if(name == "b"){ box.position = cc.p(0,this.offset+boxHeight/2) }else{ box.position = cc.p(0,-this.offset-boxHeight/2) } } box.parent = this.mycontent }, setLineHighlight(){ if(this.newLoaded == 0){//第一次加载 this.AEndLineHighlighted = true this.BHeadLineHighlighted = false if(this.dataAbove.length%2 == 0){ this.AHeadLineHighlighted = false }else{ this.AHeadLineHighlighted = true } if(this.dataBelow.length%2 == 0){ this.BEndLineHighlighted = true }else{ this.BEndLineHighlighted = false } }else if(this.newLoaded == 'a'){ //a是重置过的 if(this.dataFlag ['type'] == 'ab'){ this.AEndLineHighlighted = !this.BHeadLineHighlighted if(this.dataAbove.length%2 == 0){ this.AHeadLineHighlighted = !this.AEndLineHighlighted }else{ this.AHeadLineHighlighted = this.AEndLineHighlighted } }else{ this.AHeadLineHighlighted = !this.BEndLineHighlighted if(this.dataBelow.length%2 == 0){ this.AEndLineHighlighted = !this.AHeadLineHighlighted }else{ this.AEndLineHighlighted = this.AHeadLineHighlighted } } }else if(this.newLoaded == 'b'){ if(this.dataFlag ['type'] == 'ab'){ this.BHeadLineHighlighted = !this.AEndLineHighlighted if(this.dataBelow.length%2 == 0){ this.BEndLineHighlighted = !this.BHeadLineHighlighted }else{ this.BEndLineHighlighted = this.BHeadLineHighlighted } }else{ this.BEndLineHighlighted = !this.AHeadLineHighlighted if(this.dataAbove.length%2 == 0){ this.BHeadLineHighlighted = !this.BEndLineHighlighted }else{ this.BHeadLineHighlighted = this.BEndLineHighlighted } } } }, showTable(data){ this.a = new cc.Node('a') this.b = new cc.Node('b') this.lineHeight = this.maskShowHeight/8 console.log("单行高度:"+this.lineHeight) this.offset = 0 this.dataFlag ['type'] = 'ab' this.firstShow = true this.newLoaded = 0 this.drawTables(data) }, loadContent(){ console.log("加载一次") if (CC_WECHATGAME) { console.log("请求对手列表信息") var self = this wx.cloud.init({env:'test-8fii9'}) wx.cloud.callFunction({ name: 'getChallengeList', data:this.dataFlag, success: function(res) { self.showTable(res.result) }, fail: console.error }) }else{ console.log("这里不是微信环境") var aboveData=[ { 'nickName':'我', 'pinji':'正三品0', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'云山', 'pinji':'正三品1', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'微信昵称最长多', 'pinji':'正三品2', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'卓尔', 'pinji':'正二品3', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'卓尔', 'pinji':'正二品4', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'卓尔', 'pinji':'正二品5', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'卓尔', 'pinji':'正二品6', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'卓尔', 'pinji':'正二品7', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'卓尔', 'pinji':'正二品8', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'卓尔', 'pinji':'正二品9', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" } ] var belowData=[ { 'nickName':'云和山', 'pinji':'正五品0', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'云和山1', 'pinji':'正四品1', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'云和山', 'pinji':'正四品2', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'云和山', 'pinji':'正四品3', 'title':'御前侍卫4', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'云和山', 'pinji':'正四品4', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'云和山', 'pinji':'正四品5', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'云和山', 'pinji':'正四品6', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'云和山', 'pinji':'正四品7', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'云和山', 'pinji':'正四品8', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" }, { 'nickName':'云和山', 'pinji':'正四品9', 'title':'御前侍卫', 'avatarUrl':"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLxPYVibDibr3uz9GOFLgibZFp8e7vicZXPjbOHOkfvH9l1epENYibckPZibicEAFvbMuhib2MHRaaySX9jkw/132" } ] var localData={ 'above':aboveData, 'below':belowData } this.showTable(localData) } }, callback: function (scrollview, eventType, customEventData) { this.loading = false var offset = scrollview.getScrollOffset().y //console.log("偏移量:"+offset) var startOffset = (this.mycontent.height-this.maskShowHeight)/2 //console.log("初始偏移:"+startOffset) //内容部分下移的极限 var minOffset = startOffset-(this.dataAbove.length*this.lineHeight-this.maskShowHeight/2) var maxOffset = startOffset+this.dataBelow.length*this.lineHeight-this.maskShowHeight/2 //如果内容不满一屏高度，不触发 //console.log(this.dataFlag['unit']) if(offset >= maxOffset-20 && (this.dataBelow.length >= this.dataFlag['unit'])){ console.log("到底啦 需要刷新") if(this.loading){ return } console.log("开始加载新页面") this.loading = true if(this.dataFlag ['type'] == 'ab'){ //重置'a区域' this.a.removeFromParent() this.b.removeFromParent() this.dataFlag['pageAbove'] -= 1 this.dataFlag['pageBelow'] -= 1 /*() this.dataFlag = { //type:'ab',//上下位置关系 unit:10, pageAbove:0,//包含玩家本人且排名高的最近的unit人 pageBelow:-1,//低于玩家排名的最近的unit人 //>=0 返回的数据 exp 增长 玩家本人在第一个 //<0 返回的数据 exp 递减 } */ this.loadContent() this.loading = false //this.dataFlag ['type'] == 'ba' //this.newLoaded = 'a' }else{//当前'ba' //this.dataFlag ['type'] = 'ab' //this.newLoaded = 'b' } }else if(offset <= Math.max(minOffset,0)+20 &&(this.dataAbove.length >= this.dataFlag['unit'])){ console.log("到顶啦 需要刷新") } }, loadTools(screenWidth,screenHeight){ var gap_toolBar = 20 var back = new cc.Node() var backSp = back.addComponent(cc.Sprite) var frame_back = new cc.SpriteFrame(cc.url.raw('resources/back.png')); backSp.spriteFrame = frame_back backSp.sizeMode = 'CUSTOM'//支持缩 var borWidth = screenWidth/8 var barWidth = borWidth*0.8 var barHeight = barWidth*95/92 back.width = barWidth back.height = barHeight back.position = cc.p(-screenWidth/2+barWidth+gap_toolBar,this.UIStartY) //home.zIndex = 200 back.parent = this.node back.on(cc.Node.EventType.TOUCH_START, function(event){ cc.director.loadScene('question') } ,this) }, start () { }, // update (dt) {}, });