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

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

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

先预览一下全部代码：

<!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业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

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