使用Per.js快速开发商品信息页面

最新推荐文章于 2022-11-25 20:39:20 发布

Skyogo工作室

最新推荐文章于 2022-11-25 20:39:20 发布

阅读量461

点赞数

分类专栏： JavaScript 文章标签： JavaScript 响应式框架渐进式框架快速开发 JS

本文链接：https://blog.csdn.net/qq_40263389/article/details/82700508

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇博客介绍如何利用Per.js快速开发一个商品信息页面。通过创建HTML结构，引入商品信息的JSON文件，使用Per.js的Per.ajax和Per.page模块进行数据加载和页面切换，实现了商品信息的动态展示和页面之间的导航功能。

摘要由CSDN通过智能技术生成

在此，我们将会使用Per.js来快速开发一个商品的信息页面。

首先，先把基础文件和文件夹创建好：

之后，我们在index.html里面把基本结构写好：

<!DOCTYPE html>
<html>
    <head>
        <title>商品信息页面</title>
        <meta charset="UTF-8">
    </head>
    <body>
        
        <script src="js/Per.js"></script>
        <script>
            
        </script>
    </body>
</html>

写好了基本结构之后，我们在根目录下面创建一个名为JSON的文件夹。

然后，我们在JSON文件夹里面新建2个json文件，名为item1和item2。

然后在item1.json里面写入这些商品信息：

{
    "name": "apple",
    "price": 2,
    "imgURL": "img/apple.jpg"
}

在item2.json里面写入这些：

{
    "name": "banana",
    "price": 3,
    "imgURL": "img/banana.jpg"
}

然后，我们在index.html文件里面的body标签里面写入2对div标签，id为page1和page2。

<div id="page1"></div>
<div id="page2"></div>

写完了之后，我们分别在2个div里面写上一对ul。

<div id="page1">
    <ul></ul>
</div>
<div id="page2">
    <ul></ul>
</div>

然后，我们在script标签里面写入下列代码：

Per().use(["Per.ajax","Per.page"]);
var allJSONLoadCount = 0;
var item1JSON;
var item2JSON;
Per().ajax("GET","JSON/item1.json","",true,function(val){
    item1JSON = JSON.parse(val);
    allJSONLoadCount++;
    loadComplete();
});
Per().ajax("GET","JSON/item2.json","",true,function(val){
    item2JSON = JSON.parse(val);
    allJSONLoadCount++;
    loadComplete();
});

这些代码的意思是，使用Per.ajax和Per.page模块，并用Per.ajax模块的ajax方法分别加载item1和item2文件，并调用一个函数叫loadComplete。

之后，我们把loadComplete函数添上：

function loadComplete(){
    if(allJSONLoadCount == 2){
        Per().page().create.pageGroup("item");
        Per().page().create.page("item","#page1");
        Per().page().create.page("item","#page2");
        Per("#page1").do({
            for: [item1JSON]
        });
        Per("#page2").do({
            for: [item2JSON]
        });
    }
}

再然后，我们在id为page1的div里面添加一个参数，为p-for-in，把它的值设置为var，并在page2里面也添加一个，然后再在这两个div里面添加一个参数，为p-html，值随便

<div id="page1" p-html p-for-in="var">
    <ul></ul>
</div>
<div id="page2" p-html p-for-in="var">
    <ul></ul>
</div>

然后，我们分别在两个div里面的ul标签中间添加这样一段内容：

<li>{{var.name}}</li>
<li>价格：{{var.price}}</li>
<li><img src="{{var.imgURL}}" height="50px"></li>

之后，我们打开浏览器，会发现这些都已经显示出来了：

之后，我们再在id为page2的div的下面写上2对button标签，里面分别写上“第一页”和“第二页”，并将它们的id分别设置为"toPage1"和"toPage2"。

写完了之后，我们再script标签里面写上这样一段代码：

Per("#toPage1").do({
    click: function(){
        Per().page().to("item",1);
    }
})
Per("#toPage2").do({
    click: function(){
        Per().page().to("item",2);
    }
})

然后我们再回到body标签里面，在page2这个div里面添加一个style参数，把他的display设置为none。

然后，打开浏览器，我们会发现已经可以自如的切换了！

全部代码：

<!DOCTYPE html>
<html>
    <head>
        <title>商品信息页面</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="page1" p-html p-for-in="var">
            <ul>
                <li>{{var.name}}</li>
                <li>价格：{{var.price}}</li>
                <li><img src="{{var.imgURL}}" height="50px"></li>
            </ul>
        </div>
        <div style="display: none" id="page2" p-html p-for-in="var">
            <ul>
                <li>{{var.name}}</li>
                <li>价格：{{var.price}}</li>
                <li><img src="{{var.imgURL}}" height="50px"></li>
            </ul>
        </div>
        <button id="toPage1">第一页</button>
        <button id="toPage2">第二页</button>
        <script src="js/Per.js"></script>
        <script>
            Per().use(["Per.ajax","Per.page"]);
            var allJSONLoadCount = 0;
            var item1JSON;
            var item2JSON;
            Per().ajax("GET","JSON/item1.json","",true,function(val){
                item1JSON = JSON.parse(val);
                allJSONLoadCount++;
                loadComplete();
            });
            Per().ajax("GET","JSON/item2.json","",true,function(val){
                item2JSON = JSON.parse(val);
                allJSONLoadCount++;
                loadComplete();
            });
            function loadComplete(){
                if(allJSONLoadCount == 2){
                    Per().page().create.pageGroup("item");
                    Per().page().create.page("item","#page1");
                    Per().page().create.page("item","#page2");
                    Per("#page1").do({
                        for: [item1JSON]
                    });
                    Per("#page2").do({
                        for: [item2JSON]
                    });
                }
            }
            Per("#toPage1").do({
                click: function(){
                    Per().page().to("item",1);
                }
            })
            Per("#toPage2").do({
                click: function(){
                    Per().page().to("item",2);
                }
            })
        </script>
    </body>
</html>