WeUI给List项目添加详情跳转页面
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>案例</title> 9 <link rel="stylesheet" type="text/css" href="style/weui.css" /> 10 <link rel="stylesheet" href="style/example.css"> 11 <link rel="stylesheet" type="text/css" href="style/applyCard.css"> 12 </head> 13 <body ontouchstart=""> 14 15 <div class="container" id="container"> 16 <div class="page home js_show"> 17 18 </div> 19 </div> 20 21 <script type="text/html" id="tpl_home"> 22 <div class="page"> 23 <div class="weui-cells"> 24 <a class="weui-cell weui-cell_access js_item" data-id="button" href="javascript:;"> 25 <div class="weui-cell__bd"> 26 <p>Button</p> 27 </div> 28 <div class="weui-cell__ft"></div> 29 </a> 30 </div> 31 </div> 32 <script type="text/javascript"> 33 $(function(){ 34 var winH = $(window).height(); 35 var categorySpace = 10; 36 37 $('.js_item').on('click', function(){ 38 var id = $(this).data('id'); 39 window.pageManager.go(id); 40 }); 41 }); 42 </script> 43 44 45 <script type="text/html" id="tpl_button"> 46 <div class="page"> 47 <a class="weui-cell weui-cell_access" href="javascript:;"> 48 <div class="weui-cell__bd">button详情1</div> 49 </a> 50 <a class="weui-cell weui-cell_access" href="javascript:;"> 51 <div class="weui-cell__bd">button详情2</div> 52 </a> 53 </div> 54 55 </script> 56 57 <script src="./js/zepto.min.js"></script> 58 <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script> 59 <script src="./js/example.js"></script> 60 61 62 </body> 63 </html>
参考来源：WeUI
