Commit 69438bc8 authored by liujiangnan's avatar liujiangnan

feat: 滚动条

parent f54e1001
......@@ -10,7 +10,7 @@ cc.Class({
},
ProgressBar: {
default: null,
type: cc.ProgressBar
type: cc.Node
},
playButton: {
default: null,
......@@ -145,17 +145,14 @@ cc.Class({
this.initdDrag();
},
async initBg() {
const bgNode = cc.find('Canvas/bg');
bgNode.scale = this._mapScaleMax;
},
initListener() {
},
initdDrag() {
const maxX = this.ProgressBar.node.width;
const maxX = this.ProgressBar.width;
const minX = 0;
this.barTag.off(cc.Node.EventType.TOUCH_START);
this.barTag.on(cc.Node.EventType.TOUCH_START, (e) => {
console.log("TOUCH_START");
......@@ -198,10 +195,10 @@ cc.Class({
this.updateBarByPos(this.barTag.x);
this.triggerInteractive()
});
this.ProgressBar.node.off(cc.Node.EventType.TOUCH_START);
this.ProgressBar.node.on(cc.Node.EventType.TOUCH_START, (e) => {
this.ProgressBar.off(cc.Node.EventType.TOUCH_START);
this.ProgressBar.on(cc.Node.EventType.TOUCH_START, (e) => {
const pos = e.getLocation();
const pPos = this.ProgressBar.node.convertToNodeSpaceAR(pos);
const pPos = this.ProgressBar.convertToNodeSpaceAR(pos);
const newX = Math.min(maxX, Math.max(pPos.x, minX));
this.updateBarByPos(newX);
// console.log("ProgressBar TOUCH_START", newX);
......@@ -211,7 +208,7 @@ cc.Class({
console.log("screen TOUCH_START");
this.triggerInteractive()
});
const pgBar = this.ProgressBar.node;
const pgBar = this.ProgressBar;
this.tw = new (function(){
this._tw = cc.tween(pgBar).delay(3).to(.6, {
opacity: 255
......@@ -238,17 +235,8 @@ cc.Class({
pgBar.opacity = 255;
}
});
// this.tw = cc.tween(this.ProgressBar.node).delay(3).to(.6, {
// opacity: 0
// }).call(() => {
// console.log('This is a callback');
// // this.tw.stop();
// // this.tw.removeSelf()
// // this.tw = null;
// })
},
async initView() {
await this.initBg();
this.initListener();
},
......@@ -276,7 +264,7 @@ cc.Class({
},
triggerInteractive() {
this.tw.stop();
this.ProgressBar.node.opacity = 255;
this.ProgressBar.opacity = 255;
this.tw.start();
},
checkProgressBarStatus() {
......@@ -286,11 +274,11 @@ cc.Class({
}
} else {
this.tw.stop();
this.ProgressBar.node.opacity = 255
this.ProgressBar.opacity = 255
}
},
updateBarByPos(newX) {
const maxX = this.ProgressBar.node.width;
const maxX = this.ProgressBar.width;
const minX = 0;
const percent = newX / maxX;
......@@ -299,16 +287,16 @@ cc.Class({
this.videoPlayer.currentTime = percent * dur
},
updateBarByTime(ct){
this.currentTimeLabel.string = this.formatTime(ct);
const dur = this.videoPlayer.getDuration();
const percent = ct / dur;
const maxX = this.ProgressBar.node.width-20;
const maxX = this.ProgressBar.width-20;
const minX = 0;
let newX = percent * maxX;
newX = Math.min(maxX, Math.max(newX, minX));
this.barTag.x = newX;
this.bar.width = newX;
this.bar.x = 0 - (maxX / 2);
},
formatTime(time) {
if (time === undefined) {
......
// {"imgAni":{"ske":{"url":"https://teach.cdn.ireadabc.com/e13afca23d37ba33489c0aaa61a515f5.json","name":"川阅阅_ske.json"},"tex":{"url":"https://teach.cdn.ireadabc.com/7afcddbb7f0127613059e574638a9f3e.json","name":"川阅阅_tex.json"},"png":{"url":"https://teach.cdn.ireadabc.com/63699fcef6053eef4f58b89dad35af0b.png","name":"川阅阅_tex.png"}},"tipSwitch":"1","tipType":"page","tipBg":"https://teach.cdn.ireadabc.com/4516be9212c58098c8eebbd7021c8c2a.png","tipPage":[{"title":"这么小的院子里,居然同时有一间书房和一间书院,这家人可真喜欢读书啊。","audio":"https://staging-teach.cdn.ireadabc.com/c03129693e6cabf061661fba349fa031.mp3"}],"title":"","audio":"","audioName":"","image":"https://teach.cdn.ireadabc.com/efa8d5d75d18379dcac9ee885d6f2980.png","endImgAni":{"ske":{"url":"https://teach.cdn.ireadabc.com/8a5825bc51a32f13ddb55d3065d713a9.json","name":"动画用图川阅阅奖励_ske.json"},"tex":{"url":"https://teach.cdn.ireadabc.com/c4f5e10343ab1e79eb7407867fc4a85b.json","name":"动画用图川阅阅奖励_tex.json"},"png":{"url":"https://teach.cdn.ireadabc.com/bc984a44b7537f051707f662fba3943e.png","name":"动画用图川阅阅奖励_tex.png"}},"endImgTitle":"棒棒的!","points":"","tips":"匾额写的是这间屋子的名字或屋子最主要的功能","questionScore":"15","video_url":""}
export const defaultData = {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment