移动专题框架

git 地址:

git@git-wz.gz.netease.com:nie-comm/model-for-topic.git

目的

减少重复开发 集成常用交互、常规处理、兼容性处理，降低开发成本，实现快速开发 降低新同学进行移动开发门槛

模板说明

• 支持左右（上下）滑动切屏（可选）
• 集成横屏提示处理（提示用户使用竖屏浏览）
• 集成创建动画元素功能
  • 从上一屏到当前屏时元素的动画效果
  • 从下一屏回退到当前屏时元素的动画效果
  • 离开当前屏元素消失时的动画效果

• 场景背景图和动画元素背景图预加载功能（未加载完显示loading）
• 提供跳转到某一屏的方法
• 提供是否重复播放动画元素设置
• 引用图片资源预加载

方法调用

创建专题：MobileTopic.createTopic(params)

参数

params:object对象，具体对象字段如下

params={
    warper:"#specile",//string,外层容器
    containerDiv:"#stage",//string,场景节点的外层节点
    stages:".stage",//string,所有场景节点选择器
    duration:800,// int,切换场景滚动时间
    activeClassName:"inited",// string,当前场景应用的样式名
    isReplay:false,// bool,当回退到已经浏览过的场景时是否重播场景动画
    isHorizontal:false,// bool,是否水平滚动，false为垂直滚动
    stageBgs:[],// array,每个场景的背景图
    isAutoToNextStage:true,//bool,是否每次滑屏时是否自动切换到下一场景,默认为true
    swipeCallback:function(param){//function,每次滑屏时的回调函数参数param={preStageIndex:1,curStageIndex:2,swipeTo:1}，若isAutoToNextStage=true会返回上一个场景的索引值preStageIndex和当前场景的索引值curStageIndex,若isAutoToNextStage=false ，则仅当发生场景切换时才会返回这两个索引值，否则返回当前场景的索引值以及滑动方向swipeTo,swipeTo为1表示向前（右或下）滑动，为-1是表示向后（左或上）滑
    },
    initedCallback:function(){//function,初始化后的回调，
    }
});

调用实例

//实现每次滑屏将当前场景的动画元素按顺序播放一个，当前场景动画元素播放完后下一次滑屏才会进入下一场景
var _animates;
MobileTopic.createTopic({
    warper:"#specile",
    containerDiv:"#stage",
    stages:".stage",
    duration:800,
    activeClassName:"inited",
    isReplay:false,
    isHorizontal:false,
    stageBgs:['../../img/spc_01_bg.jpg','../../img/spc_02_bg.jpg','../../img/spc_03_bg.jpg','../../img/spc_04_bg.jpg','../../img/spc_05_bg.jpg','../../img/spc_06_bg.jpg'],
    isAutoToNextStage:false,
    swipeCallback:function(param){
        if(param.curStageIndex    <    $("#stage .stage").length-1&&param.swipeTo>0){
            if(_animates[param.curStageIndex].length>0){
                _animates[param.curStageIndex][0].play();
                _animates[param.curStageIndex].shift();
            }
            else{
                MobileTopic.scorllTo(param.curStageIndex+param.swipeTo);
            }
        }
        else if(param.curStageIndex    >0    &&param.swipeTo<0){
            MobileTopic.scorllTo(param.curStageIndex+param.swipeTo);
        }

    },
    initedCallback:function(){
        alert("初始化完成")
    }
});

创建动画元素：MobileTopic.createAnimateEle(params)

参数

parmas:object对象，具体对象字段如下

params={
            stageIndex:0,//int,当前元素所属场景的索引值，必填
            ele:$("#ani_1"),//$(),动画元素的id，必填
            imgUrl:"../images/ani.png",//url,动画元素的背景图，若背景图无需预加载，可以直接写到样式表中，而这里不需要传，可选
            forwardInClass:"ani",// className,从上一场景到当前场景时，给动画元素添加的样式表名，可选，不填则场景加载不对元素进行处理，仅设置其背景图
            backInClass:"ani_back",//className从下一场景返回到当前场景时，给动画元素添加的样式表，若不传，且isReplay为true,则取值与forwardInClass参数一致，可选
            outClass:"ani_out",//className退出当前场景时给元素添加的样式表名，若不传，则仅根据实际情况去掉当前forwardInClass或backInClass,，可选
            finishCallback:function(){//function,元素开始播放时回调,，可选

            }
        }

调用实例

MobileTopic.createAnimateEle({
            stageIndex:2,
            ele:$("#ani_1"),
            imgUrl:"../images/ani.png",
            forwardInClass:"ani"
        })

跳转到某一场景：MobileTopic.scorllTo(index)

参数：

index : int,要跳转到场景的索引值，从0开始，同时会执行swipeCallback()

调用实例：

MobileTopic.scorllTo(3)//跳转到每四场景