教程 关于非线性页面切换的部分代码公开

[ppyycc]

设计思路：
对于主页面，以某一个变量作为其显示的标志，以另一个变量作为其左边距（或右）
对于其他页面，以主页左边距+（-）336作为左边距，以一列表中某元素作为显示标志
用一个全局计时器完成页面切换时的计算（计算主页左边距到目标值）
对于显示页面函数，需完成的操作：
1.将需要显示的页面在bool列表中设为true
2.将切换页面指令设置为true/false（即非运算）
部分代码：

非线性运动函数：
[COLOR=rgb(184, 49, 47)]unLine(speed,mode,high,now)//速度 形式 目标 现在高度[/COLOR]
{
if(mode==1)//反比例
{
return Math.round((now-high)/speed)
}

[COLOR=rgb(184, 49, 47)] },[/COLOR]
主要变量：
[COLOR=rgb(184, 49, 47)]pages:[false,false,false],[/COLOR]
pag:false,
[COLOR=rgb(184, 49, 47)]pagesLeft:0,[/COLOR]
全局计时函数：
[COLOR=rgb(184, 49, 47)]mainCounter(){[/COLOR]
if(this.pag && this.pagesLeft>-336)
{
this.pagesLeft-=this.unLine(5,1,-344,this.pagesLeft,0)
}
if(!this.pag && this.pagesLeft<0)
{
this.pagesLeft-=this.unLine(5,1,8,this.pagesLeft,0)
}
if(this.pagesLeft==0){
this.pages.fill(false);
}
if(this.pagesLeft==-336){
this.mainPage=false
}
else{
this.mainPage=true
}

[COLOR=rgb(184, 49, 47)] },[/COLOR]

显示函数：
[COLOR=rgb(184, 49, 47)]showPage(sth){[/COLOR]
this.pages[sth]=true;
this.pag=!this.pag;
[COLOR=rgb(184, 49, 47)] },[/COLOR]
主页面：
[COLOR=rgb(184, 49, 47)]<div class="page" style="left:{{pagesLeft}}" if="{{mainPage}}">[/COLOR]
其他页面：
[COLOR=rgb(184, 49, 47)]<div class="page" if="{{pages[2]}}" style="left:{{pagesLeft+336}}">[/COLOR]
class:
[COLOR=rgb(184, 49, 47)].page {[/COLOR]
width: 336px;
height: 480px;
position: absolute;
[COLOR=rgb(184, 49, 47)]}[/COLOR]

如果对您的开发有启示/帮助作用，您可以直接复制上述源码！
但别忘记在“鸣谢”或“关于”中提起我的名字