WeUI给List项目添加详情跳转页面

àì夳堔傛蜴生んèń 2023-08-17 17:40 67阅读 0赞

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][]

转载于:https://www.cnblogs.com/Jayeblog/p/11511895.html

[WeUI]: https://weui.io/