首次开发H5长图页总结.
资源统一加载
资源统一加载, 分开获取
定义资源标识符
- 在
src/resources目录下 定义各个资源模块. - 在
Asset.js中获取定义好的所有模块, 循环出具体的文件路径, 统一数组. - 按照一定规则组件文件id, 方便页面中获取.
暴露方法, 挂载全局
在全局app.init的时候, 进行资源的初始化, 并把初始化的资源对象挂载到Global对象上, 方面后续其他页面的资源获取.(Global用作全局属性管理).代码的执行顺序为:
app.init() => new Asset() => asset.load() => asset.onComplete() => initStage() => ....
- load: 可开始加载全部资源
- onComplete: 资源全部加载完成
- getAsset: 获取指定资源
切换思想
全局只存在两个container; 所有页面交替出现
创建舞台的过程
所有的页面均在initStage()初始化舞台时, 进行创建, 以确保资源全部加载完成. 舞台初始化完成, 所有的页面也均初始化完成.
initStage()过程包括:
- initBus(): 初始化全局的事件订阅系统
- createStage(): 创建舞台, 在创建舞台的时候, 就和绑定好了滚动函数.
- initScene: 因为刚开始的代码逻辑出现问题, 全局只有一个场景, 是起初没有考虑到的
- 完成, 即可把第一个页面推出显示栈.
页面创建过程
在创建舞台的时候, 会初始化场景, 我们的页面总体分成: 舞台 > 场景 > 部分(页面)
初始化场景的过程, 也就是初始化所有页面的过程:
new Scene() => init partMap() => partMap.push(new Part)
partMap是所有页面的集合, 按照显示顺序进行创建.
- 每当执行new part时, 就是页面执行自身constructor, 并调用init方法的过程.
- 因每一个页面都是通过push方法, 放入到parMap中的, 故初始化过程的中partMap的长度就是, 当前页面所在partMap中的位置
- 页面创建后, 会包含所有后续需要的属性, 以及页面声明周期中所有状态的初始化.
- 并在创建过程中完成各个模块的监听
页面生命周期
正序执行过程: p1.start => p1.next => p2.start => p1.end => p2.next => ....
倒序执行过程: p2.prev => p1.restart => p2.end => ....
每次声明周期函数, 为避免计算错误, 只在特定的时间执行一次, 故需要一些关键的状态管理
-
start: 页面开始函数, 即让页面执行
addTo()添加到舞台中 -
reStart: 重新展示页面, 让页面的执行
addTo(stage, 0), 让页面插入到舞台的最底层位置 -
prev: 上一个页面战术, 即让上一个页面执行
reStart()重新展示 -
next: 下一个页面战术, 即下一个页面执行
start()方法 -
end: 页面展示结束, 从父元素中remove出来, 并重置方法执行状态.
除next方法, 需要在页面内具体实现外, 其他方法均为统一处理
-
shouldUpdate: 监听到滚动, 执行页面内具体逻辑
滑动高度
在
initStage的时候, 绑定滚动事件. 并广播全局事件.
动态计算
- 全局总高度: 每一次
new part的时候, 都会累加整个页面需要的总高度, 并以此设计能够滑动的高度. - 页面高度计算方式: 页面的高度, 是通过参数传入的.
- 页面开始高度:
- 从全局看: 当前页面高度是, 之前所有页面的累加高度, 也就是全局的高度.
- 从页面看: 所有的页面都是从0开始.
当前页面的滚动位置
当前页面滚动的位置 = 总共滚动过的高度 - 当前页面开始的高度
<0的部分还和上一个页面重叠>0之后, 自己完全出现合适的时机调用,next, 下一个页面就可以开始<0的过程了.- 当滚动的高度大于当前页面的高度时, 就是执行end的时候了.
附上核心实现函数
// Part.js
// 注: 此函数依赖全局模块
import Global from './Global'
const Part = Hilo.Class.create({
Mixes: Hilo.EventMixin,
constructor: function (properties) {
this.parentNode = properties.parentNode || null; // 页面所属场景
this.parentContainer = properties.parentNode ? properties.parentNode.content : null; // 页面所属容器
this.parentName = properties.parentNode ? properties.parentNode.name : ''; // 页面所属场景名称
this.name = properties.name || ''; // 页面名称
this.partHeight = properties.height || 0; // 页面的总高度
this.disappearNext = properties.disappear || 0; // 页面需要消失的距离
this.state = 'hide'; // 当前页面是否展示
this.nextDone = false; // next函数是否执行过
this.prevDone = false; // prev函数是否执行过
this.index = this.parentNode.partMap.length; // 此处为核心概念, 根据数组长度确定当前索引!!
this.content = new Hilo.Container({
id: this.name
});
this.initStartHeight(); // 计算当前页面的在全局中的开始高度
if (this.init instanceof Function) this.init();
// 监听用户滚动, 高度变化.
Global.bus.on('changeTouchHeight', this.changeTouchHeight.bind(this));
},
initStartHeight: function () {
// 获得当前页面在全剧中的高度
var perNode = this.getPrevNode()
this.startHeight = perNode ? Global.totalHeight += perNode.partHeight : Global.totalHeight;
// 页面能够滚动到的最大高度
var maxHeight = (this.startHeight + this.partHeight - Global.height) / Global.touchSpeed;
Global.scroller.setDimensions(0, 0, 0, maxHeight)
},
changeTouchHeight: function (info) { // 监听高度变化
if (this.state === 'show' && this.shouldUpdate instanceof Function) {
var touchHeight = info.detail.distance - this.startHeight; // 页面内的高度变化值
var direction = info.detail.direction; // 滚动的方向
if (direction === 'up' && touchHeight <= 0) { // 向上滚动, 且高度小于0, 上一个页面展示
this.prev();
}
if (direction === 'down' && touchHeight >= this.partHeight) { // 向下滚动, 超过当前页面最大高度, 从父容器中抽出
console.log(this.name, 'down end')
this.end()
}
if (direction === 'up' && this.getPrevNode() && touchHeight < -this.getDisappearPrev()) { // 向上滚动, 超过上一个页面的消失高度, 从父元素中抽出
console.log(this.name, 'up end')
this.end()
}
// 调用生命周期, 通知页面内变化
this.shouldUpdate(touchHeight, direction);
}
},
start: function () { // 开始展示
if (this.state === 'show') return;
this.state = 'show';
console.log(this.name, 'start');
if (this.onStart instanceof Function) this.onStart();
this.content.addTo(this.parentContainer);
},
reStart: function () { // 再次展示, 也就是向上滑动, 展示到舞台的最底层
if (this.state === 'show') return;
this.state = 'show';
console.log(this.name, 'reStart');
if (this.onreStart instanceof Function) this.onreStart();
this.content.addTo(this.parentContainer, 0);
},
prev: function () { // 展示上一个页面
if (this.state === 'hide' || this.prevDone) return;
if (this.getPrevNode() && this.getPrevNode().state === 'show') return;
this.prevDone = true;
console.log(this.name, 'prev')
if (this.onPrev instanceof Function) this.onPrev();
this.getPrevNode() && this.getPrevNode().reStart();
},
next: function () { // 展示下一个页面
if (this.state === 'hide' || this.nextDone) return;
if (this.getNextNode() && this.getNextNode().state === 'show') return;
this.nextDone = true;
console.log(this.name, 'next')
if (this.onNext instanceof Function) this.onNext();
this.getNextNode() && this.getNextNode().start();
},
end: function () { // 页面展示结束, 抽出
if (this.state === 'hide') return;
console.log(this.name, 'end')
if (this.onEnd instanceof Function) this.onEnd();
this.state = 'hide';
this.content.removeFromParent();
this.getNextNode() && (this.getNextNode().prevDone = false);
this.getPrevNode() && (this.getPrevNode().nextDone = false);
},
getPrevNode: function () { // 获取上一个页面节点
var map = this.parentNode.partMap;
var index = this.index;
return map[index - 1];
},
getNextNode: function () { // 获取下一个页面节点
var map = this.parentNode.partMap;
var index = this.index;
return map[index + 1];
},
getDisappearNext: function () { // 向下滚动消失需要的距离
return this.disappearNext;
},
getDisappearPrev: function () { // 向上滚动消失需要的距离
return (this.getPrevNode() && this.getPrevNode().getDisappearNext()) || 0;
},
});
export default Part;