Niep.js - Web移动端无刷新页面切换 -- 入门教程

最新推荐文章于 2024-04-28 16:33:37 发布

phoooob

最新推荐文章于 2024-04-28 16:33:37 发布

阅读量1.8k

点赞数

分类专栏： Niep-js 文章标签：移动 web 无刷新

本文链接：https://blog.csdn.net/phoooob/article/details/51506748

版权

Niep-js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首页加载
在首页为body添加两个属性:
1. data-start值为初始页面的路径
2. data-params为可选参数，初始化的页面接收的参数。

<body data-start="" data-params="">

</body>

初始化页面数据
引入Niep.js后，调用方法：

Niep.init();

基本参数设置
在调用Niep.init()方法时，可以设置一些基本的的参数：

Niep.init({
    loading : function(isLoading){
        if( !isLoading ){
            //加载完成
            $('#NR_loading').hide();
        }else{
            //加载中……
            $('#NR_loading').show();
        }
    } , 
    showClass : 'page-show' , //单页显示的class
    baseClass : 'page' , //单页基础class
    menuId : 'menu' ,  //菜单ID
    menuItemClass : 'menu-item' , //菜单子级的class
    menuShowClass : 'weui_bar_item_on' ,  //显示菜单的class
    host : 'http://localhost:8080/weixin_react' , //网站根路径
    pageRoute : '/page/load' ,  //请求页面路径    
    start : 'N.' , //开始标签
    end : '.L' ,   //结束标签
    loginPageId : 'page_login' , //登陆页面ID
});

loading(isLoading) ; 页面切换时，会触发loading(true)方法，页面加载完成，调用loading(false) ;
showClass : 一个display：block的class，用于控制不同页面的显示与隐藏。页面隐藏时去除该class，显示时会添加该class。
baseClass：每一个页面基础的class，设置样式display：none。
menuId：菜单栏的Id
menuItemClass ：菜单栏中，每一个菜单的class
menuShowClass ：菜单栏中，当前菜单被选中时添加的class。
host：网站根目录的路径
pageRoute ：请求页面的路径，每一个页面都是通过ajax向服务端请求，不同的页面，通过这个地址传入对应的页面名字作为参数。
start ， end ：开始标签和结束标签
loginedPageId ：登录页面的ID，如果需要用户登录时需设置

页面参数设置

<div class="page" id="page_coachInfo" 
     data-menu="-1" data-clone="true" data-preload="userCenter,coachList" >

</div>

data-menu:设置是否显示菜单，不设置或者值为-1则为不显示菜单，多用于内页。如果显示菜单，且第一个选项被选中，则设置值为1，以此类推。
data-clone:设置页面是否复制，默认不复制，如需复制请设置data-clone=”true” 。一般而言，需要传递ID类参数的页面都需要复制。例如教练详情页、商品详情页等，这种页面的特点是，通过不同的ID来查询不同的教练、商品信息，最后输出到同一个页面模板中，我们通过页面的复制，第一次请求数据后，第二次即可快速显示复制出来的页面，无需重复请求相同的数据，反复刷新页面内容。 ||||| 举个例子：在教练列表页，用户点击A教练进入A教练的详情页，返回教练列表页，点击B教练，进入B教练的详情页，再次返回至教练列表页，再次进入A教练的详情页。||||| 在这个过程中，传统的方式是每进入一次教练详情页，请求一次教练的数据，刷新一次页面内容。此时，如果再想进入A教练的详情页，依然需要重新请求A教练的数据。但是如果你为教练详情页设置了data-clone=“true”，第一次进入A教练详情页时，会请求一次A教练的数据，第二次进入时，不会再重复请求，直接切换到第一次请求数据后复制出来的A教练的详情页。
data-preload的值为预加载页面的页面名字，如下代码块儿所示：当加载coachInfo页面时，会预加载userCenter和coachList页面，因为在coachInfo页面，有两个跳转离开的链接，一个链接是跳转至userCenter页面，一个是调转至coachList页面。页面完成了预加载后，用户进行页面切换时，即可省去等待时间。如果data-preload不指定则不预加载，多个预加载页面请用英文逗号分隔。

页面切换

页面切换时，使用a标签，href的值为要切换的目标页面的id，设置data-react=”toggle”即可。如下代码，切换至serviceList页面。data-params为切换页面时的可选参数。用于向目标页面传递参数。

 <a href="#page_serviceList" data-react="toggle">
      返回服务列表
 </a>

 <a href="#page_coachInfo" data-react="toggle" data-params="74d9c73b26a24ff598c0be87262b4896">
      查看张教练的教练详情
 </a>

phoooob

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Niep.js - Web移动端无刷新页面切换 -- 入门教程

引入Niep.js，初始化配置参数。Niep.init({ loading : function(isLoading){ if( !isLoading ){ $('#NR_loading').hide(); }else{ $('#NR_loading').show(); } } , //页
复制链接

扫一扫