Commit 69438bc8 authored by liujiangnan's avatar liujiangnan

feat: 滚动条

parent f54e1001
...@@ -10,7 +10,7 @@ cc.Class({ ...@@ -10,7 +10,7 @@ cc.Class({
}, },
ProgressBar: { ProgressBar: {
default: null, default: null,
type: cc.ProgressBar type: cc.Node
}, },
playButton: { playButton: {
default: null, default: null,
...@@ -145,17 +145,14 @@ cc.Class({ ...@@ -145,17 +145,14 @@ cc.Class({
this.initdDrag(); this.initdDrag();
}, },
async initBg() {
const bgNode = cc.find('Canvas/bg');
bgNode.scale = this._mapScaleMax;
},
initListener() { initListener() {
}, },
initdDrag() { initdDrag() {
const maxX = this.ProgressBar.node.width; const maxX = this.ProgressBar.width;
const minX = 0; const minX = 0;
this.barTag.off(cc.Node.EventType.TOUCH_START); this.barTag.off(cc.Node.EventType.TOUCH_START);
this.barTag.on(cc.Node.EventType.TOUCH_START, (e) => { this.barTag.on(cc.Node.EventType.TOUCH_START, (e) => {
console.log("TOUCH_START"); console.log("TOUCH_START");
...@@ -198,10 +195,10 @@ cc.Class({ ...@@ -198,10 +195,10 @@ cc.Class({
this.updateBarByPos(this.barTag.x); this.updateBarByPos(this.barTag.x);
this.triggerInteractive() this.triggerInteractive()
}); });
this.ProgressBar.node.off(cc.Node.EventType.TOUCH_START); this.ProgressBar.off(cc.Node.EventType.TOUCH_START);
this.ProgressBar.node.on(cc.Node.EventType.TOUCH_START, (e) => { this.ProgressBar.on(cc.Node.EventType.TOUCH_START, (e) => {
const pos = e.getLocation(); 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)); const newX = Math.min(maxX, Math.max(pPos.x, minX));
this.updateBarByPos(newX); this.updateBarByPos(newX);
// console.log("ProgressBar TOUCH_START", newX); // console.log("ProgressBar TOUCH_START", newX);
...@@ -211,7 +208,7 @@ cc.Class({ ...@@ -211,7 +208,7 @@ cc.Class({
console.log("screen TOUCH_START"); console.log("screen TOUCH_START");
this.triggerInteractive() this.triggerInteractive()
}); });
const pgBar = this.ProgressBar.node; const pgBar = this.ProgressBar;
this.tw = new (function(){ this.tw = new (function(){
this._tw = cc.tween(pgBar).delay(3).to(.6, { this._tw = cc.tween(pgBar).delay(3).to(.6, {
opacity: 255 opacity: 255
...@@ -238,17 +235,8 @@ cc.Class({ ...@@ -238,17 +235,8 @@ cc.Class({
pgBar.opacity = 255; 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() { async initView() {
await this.initBg();
this.initListener(); this.initListener();
}, },
...@@ -276,7 +264,7 @@ cc.Class({ ...@@ -276,7 +264,7 @@ cc.Class({
}, },
triggerInteractive() { triggerInteractive() {
this.tw.stop(); this.tw.stop();
this.ProgressBar.node.opacity = 255; this.ProgressBar.opacity = 255;
this.tw.start(); this.tw.start();
}, },
checkProgressBarStatus() { checkProgressBarStatus() {
...@@ -286,11 +274,11 @@ cc.Class({ ...@@ -286,11 +274,11 @@ cc.Class({
} }
} else { } else {
this.tw.stop(); this.tw.stop();
this.ProgressBar.node.opacity = 255 this.ProgressBar.opacity = 255
} }
}, },
updateBarByPos(newX) { updateBarByPos(newX) {
const maxX = this.ProgressBar.node.width; const maxX = this.ProgressBar.width;
const minX = 0; const minX = 0;
const percent = newX / maxX; const percent = newX / maxX;
...@@ -299,16 +287,16 @@ cc.Class({ ...@@ -299,16 +287,16 @@ cc.Class({
this.videoPlayer.currentTime = percent * dur this.videoPlayer.currentTime = percent * dur
}, },
updateBarByTime(ct){ updateBarByTime(ct){
this.currentTimeLabel.string = this.formatTime(ct); this.currentTimeLabel.string = this.formatTime(ct);
const dur = this.videoPlayer.getDuration(); const dur = this.videoPlayer.getDuration();
const percent = ct / dur; const percent = ct / dur;
const maxX = this.ProgressBar.node.width-20; const maxX = this.ProgressBar.width-20;
const minX = 0; const minX = 0;
let newX = percent * maxX; let newX = percent * maxX;
newX = Math.min(maxX, Math.max(newX, minX)); newX = Math.min(maxX, Math.max(newX, minX));
this.barTag.x = newX; this.barTag.x = newX;
this.bar.width = newX; this.bar.width = newX;
this.bar.x = 0 - (maxX / 2);
}, },
formatTime(time) { formatTime(time) {
if (time === undefined) { 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 = { 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