仿原生app，native特效

时间：2022-05-15 15:20:33

为解决手机端wap项目中页面跳转响应慢的问题，基于jquery开发了fr.routeApp.js，使得wap项目拥有原生app的流畅，跳转时亦有native的特效

html部分



<!--定义容器，class="fr-contain" ，初始化路由ID为0，fr-route="0"设置请求页面地址，fr-href="ddbj/index.html" -->


<div class="fr-contain" fr-route="0">

    <div class="center menuWap">

        <span class="btns btns-big btns-green" fr-href="ddbj/index.html">滴滴报价</span>

        <span class="btns btns-big btns-green" fr-href="fls/index.html">福利社</span>

        <span class="btns btns-big btns-green" fr-href="gcal/index.html">工程案例</span>

        <span class="btns btns-big btns-green" fr-href="zgz/index.html">找工长</span>

        <span class="btns btns-big btns-green" fr-href="fwlc/index.html">服务流程</span>

        <span class="btns btns-big btns-green" fr-href="ssxy/index.html">舒适学院</span>

        <span class="btns btns-big btns-green" fr-href="xxtyd/index.html">线下体验店</span>

        <span class="btns btns-big btns-green" fr-href="mfsj/index.html">免费设计</span>

    </div>

</div>




引用js部分




$(".menuWap span").frRoute({
   baseUrl:"../js/main/",//定义引用js路径，默认../js/main/
   paths:[],//定义跳转页面需要用到的js文件名
   action:"touchstart",//触发类型，目前有click，touchstart，默认touchstart
   type:"slide",//展示类型，目前有slide，fade，auto,默认slide
   callBack:function(){},//在引入页面之后执行的js，也可以写到需引入的页面
   prevBtn:".fr-back",//定义返回上级页面的按钮默认.backIco
   contain:".fr-contain"//定义引入页面的容器，默认.fr-contain
});




引入的html页面，html页面只需要代码部分，无需头和尾




<div class="pad10">

    <p class="center font20 line24 top40"> 滴滴报价</p>

    <span class="btns btns-biggest btns-ye top40 backIco">返回</span>

</div>




fr.routeApp-1.3.js




/**
 * Created by wangmiao on 15-10-15.
 */
(function($){
   $.fn.frRoute = function(o){
      var defs = {
         baseUrl:"../js/main/",
         paths:[],
         action:"touchstart",
         type:"slide",
         callBack:function(){

         },
         prevBtn:".fr-back",
         contain:".fr-contain"
      };
      var obj = this;
      var opt = $.fn.extend({},defs,o);
      var width = $(window).width();
      var frRoute = 0;
      var methods = {
         addJs:function(e){//引入js
            for(i=0;i<e.length;i++){
               $("body").append('<script type="text/javascript" src="'+opt.baseUrl+''+e[i]+'.js"></script>')
            }
         },
         addCss:function(){
            $("body").before('<style>'+opt.contain+'{position:fixed; top:0; left:0; width:100%;-webkit-transition:all .3s ease-out;  height:100%; overflow:auto;}</style>');
         },
         action:function(actionPage,paths,callback){
            //创建容器
            frRoute = parseInt($(opt.contain).last().attr("fr-route"))+1;
            if(opt.type=="slide"){
               $("body").append('<div class="'+opt.contain.substr(1)+'" fr-route="'+frRoute+'" style="-webkit-transform:translate3d('+width+'px,0,0);"></div>')
            }else if(opt.type=="fade"){
               $("body").append('<div class="'+opt.contain.substr(1)+'" fr-route="'+frRoute+'" style="-webkit-transform:scale(0)"></div>')
            }else if(opt.type=="auto"){
               $("body").append('<div class="'+opt.contain.substr(1)+'" fr-route="'+frRoute+'"></div>')
            }
            var $currTar = $(opt.contain+"[fr-route="+frRoute+"]");
            $currTar.load(actionPage,function(){
               //划入当前页面
               if(opt.type=="slide"){
                  $currTar.css({"-webkit-transform":"translate3d(0,0,0)"})
               }else if(opt.type=="fade"){
                  $currTar.css({"-webkit-transform":"scale(1)"})
               };
               //引入js调用
               if(opt.paths.length>0){
                  methods.addJs(opt.paths)
               };
               //回调函数
               if(callback){callback()}
            })
         },
         backToprevPage:function(e){//返回上一个页面
            if(opt.type=="slide"){
               e.parents(opt.contain).css({"-webkit-transform":"translate3d("+width+"px,0,0)"});
            }else if(opt.type=="fade"){
               e.parents(opt.contain).css({"-webkit-transform":"scale(0)"});
            };
            setTimeout(function(){
               e.parents(opt.contain).remove();
            },100)
         },
         init:function(){//初始化
            methods.addCss();
            obj.on(opt.action,function(){
               var nextPage = $(this).attr("fr-href")
               methods.action(nextPage,opt.paths,opt.callBack)
            });
            $(document).on(opt.action,opt.prevBtn,function(){
               if($(opt.contain).last().attr("fr-route")=="0"){
                  return;
               }else{
                  methods.backToprevPage($(this))
               }
            });
         }
      };
      methods.init()
   }
})(jQuery)


相关文章