您现在的位置是：首页 > 文章详情

使用Per.js快速开发商品价格计算页面 - for Per.js3.0

日期：2018-10-29点击：626收藏

先预览一下全部代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Per.js Demo</title>
        <meta charset="UTF-8">
    </head>
    <body id="body">
        <div id="page1">
            <h1>Welcome to use this price calculation!</h1>
        </div>
        <div id="page2" style="display: none;">
            <ul p-loop-in="var1">
                <li>This is {{var1.name}}</li>
                <li>The price is: {{var1.price}}<span p-con="{{var1.price > 20}}"> - To expensive!</span></li>
            </ul>
        </div>
        <button id="tp1">to page1</button>
        <button id="tp2">to page2</button>
        <button id="btn-refre">Refresh</button>
        <script src="Per.js"></script>
        <script>
            Per.use("Per.page");
            Per.page.create.pageGroup("allPage");
            Per.page.create.page("allPage","#page1");
            Per.page.create.page("allPage","#page2");
            var app = Per("ul");
            app.dom({
                loop: [{name: "apple",price: 20},{name: "bread",price: 30},{name: "banana",price: 25}],
                callback: function(){
                    Per("span").dom({
                        con: "in"
                    });
                }
            },true,true);
            Per("#btn-refre").dom({
                info: {
                    item: [{name: "apple",price: 20},{name: "bread",price: 30},{name: "banana",price: 25}]
                },
                click: function(){
                    this._super.innerHTML = "Refresh now!";
                    var val = parseInt(Math.random()*30+1);
                    this.item[0].price = val;
                    val = parseInt(Math.random()*30+1);
                    this.item[1].price = val;
                    val = parseInt(Math.random()*30+1);
                    this.item[2].price = val;
                    app.dom.loop = this.item;
                }
            });
            Per("#tp1").dom({
                click: function(){
                    Per.page.to("allPage",1);
                }
            });
            Per("#tp2").dom({
                click: function(){
                    Per.page.to("allPage",2);
                }
            });
        </script>
    </body>
</html>

然后发上一波效果图：

没错，就是这样一个页面，那么接下来我就来教大家如何制作。

先把基本页面格式写好。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Per.js Demo</title>
    </head>
    <body>

    </body>
</html>

之后我们使用script标签来引入Per.js文件：

<script src="Per.js"></script>
<script>
</script>

再然后，我们在body标签里面写上基本结构：

<div id="page1">
    <h1>Welcome to use this price calculation!</h1>
</div>
<div id="page2" style="display: none;">
    <ul p-loop-in="var1">
        <li>This is {{var1.name}}</li>
        <li>The price is: {{var1.price}}<span p-con="{{var1.price > 20}}"> - To expensive!</span></li>
    </ul>
</div>
<button id="tp1">to page1</button>
<button id="tp2">to page2</button>
<button id="btn-refre">Refresh</button>

之后在script标签里面再写js语句：

Per.use("Per.page");
Per.page.create.pageGroup("allPage");
Per.page.create.page("allPage","#page1");
Per.page.create.page("allPage","#page2");
var app = Per("ul");
app.dom({
    loop: [{name: "apple",price: 20},{name: "bread",price: 30},{name: "banana",price: 25}],
    callback: function(){
        Per("span").dom({
            con: "in"
        });
    }
},true,true);
Per("#btn-refre").dom({
    info: {
        item: [{name: "apple",price: 20},{name: "bread",price: 30},{name: "banana",price: 25}]
    },
    click: function(){
        this._super.innerHTML = "Refresh now!";
        var val = parseInt(Math.random()*30+1);
        this.item[0].price = val;
        val = parseInt(Math.random()*30+1);
        this.item[1].price = val;
        val = parseInt(Math.random()*30+1);
        this.item[2].price = val;
        app.dom.loop = this.item;
    }
});
Per("#tp1").dom({
    click: function(){
        Per.page.to("allPage",1);
    }
});
Per("#tp2").dom({
    click: function(){
        Per.page.to("allPage",2);
    }
});

之后打开浏览器，就正常执行了！

效果如同上方gif图一样！

【tips：必须使用Per.js >= 3.0版本】

原文链接：https://my.oschina.net/u/3754126/blog/2253907

关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。