加载中...

List

实例代码 


  1. <template>
  2.   <list class="list" loadmoreoffset=2000>
  3.     <cell class="cell" onclick="oncellclick" rownumber={{id}} repeat="{{shopList}}" scope="{{scopeValue}}" append="tree"
  4.           composite={{composite}}>
  5.       <div class="shopDiv">
  6.         <div class="shopHeader" style="flex-direction:row;">
  7.           <div style="flex:2;flex-direction:row;">
  8.             <div>
  9.               <image style="width:60;height:60;" src="{{PersonPhoto}}"></image>
  10.             </div>
  11.             <div style="flex-direction:column;margin-left:5;">
  12.               <div style="margin-top:5;">
  13.                 <text style="font-size:20;">{{PersonName}}</text>
  14.               </div>
  15.               <div style="margin-top:5;">
  16.                 <text style="font-size:20;color:#cccccc;">{{PersonVisitTime}}</text>
  17.               </div>
  18.             </div>
  19.           </div>
  20.           <div style="flex:5;flex-direction:row;">
  21.             <div style="flex-direction:row;margin-left:10;margin-top:10;">
  22.               <div>
  23.                 <image style="width:20;height:20;"
  24.                        src="https://img.alicdn.com/tps/i4/TB1zkDeIFXXXXXrXVXX07tlTXXX-200-200.png_88x88xz.jpg"></image>
  25.               </div>
  26.               <div>
  27.                 <text style="font-size:20;">Hope</text>
  28.               </div>
  29.             </div>
  30.             <div style="position:absolute;left:90;top:10;flex-direction:row;">
  31.               <div>
  32.                 <image style="width:20;height:20;"
  33.                        src="//ku.shouce.ren/files/images/201611/582c09f8d287e.jpeg"></image>
  34.               </div>
  35.               <div>
  36.                 <text style="font-size:20;">Mem</text>
  37.               </div>
  38.             </div>
  39.             <div style="position:absolute;left:170;top:10;flex-direction:row;">
  40.               <div>
  41.                 <image style="width:20;height:20;"
  42.                        src="//ku.shouce.ren/files/images/201611/582c09f8dce59.png"></image>
  43.               </div>
  44.               <div>
  45.                 <text style="font-size:20;">auth</text>
  46.               </div>
  47.             </div>
  48.             <div style="position:absolute;left:250;top:10;flex-direction:row;">
  49.               <div>
  50.                 <image style="width:20;height:20;"
  51.                        src="//ku.shouce.ren/files/images/201611/582c09f8e637d.png"></image>
  52.               </div>
  53.               <div>
  54.                 <text style="font-size:20;">Friend</text>
  55.               </div>
  56.             </div>
  57.             <div style="position:absolute;left:330;top:10;flex-direction:row;">
  58.               <div>
  59.                 <image style="width:20;height:20;"
  60.                        src="//ku.shouce.ren/files/images/201611/582c09f8ec2c6.png"></image>
  61.               </div>
  62.               <div>
  63.                 <text style="font-size:20;">issue</text>
  64.               </div>
  65.             </div>
  66.             <div style="position:absolute;left:410;top:10;flex-direction:row;">
  67.               <div>
  68.                 <image style="width:20;height:20;"
  69.                        src="//ku.shouce.ren/files/images/201611/582c09f9036dd.png"></image>
  70.               </div>
  71.               <div>
  72.                 <text style="font-size:20;">super</text>
  73.               </div>
  74.             </div>
  75.           </div>
  76.         </div>
  77.         <div class="shopBody" style="flex-direction:column;">
  78.           <div class="descDiv" style="margin-top:10;margin-left:10;">
  79.             <text class="shopDesc" style="font-size:25;">{{shopDesc}}</text>
  80.           </div>
  81.           <div style="flex-direction:row;">
  82.             <div class="imgDiv" style="flex:1;flex-direction:column;margin:10;" repeat={{shopImgList}}>
  83.               <div>
  84.                 <image class="shopImg" style="width:{{shopImgWidth}};height:{{shopImgHeight}};"
  85.                        src="{{shopImg}}"></image>
  86.               </div>
  87.               <div style="flex:1;margin-top:10;flex-direction:row;">
  88.                 <div style="flex:1;justify-content:center;flex-direction:row;">
  89.                   <div>
  90.                     <image style="width:20;height:20;"
  91.                            src="//ku.shouce.ren/files/images/201611/582c09f8e637d.png"></image>
  92.                   </div>
  93.                   <div style="margin-left:5;">
  94.                     <text style="font-size:20;text-align:center;">Up</text>
  95.                   </div>
  96.                 </div>
  97.                 <div style="flex:1;justify-content:center;flex-direction:row;">
  98.                   <div>
  99.                     <image style="width:20;height:20;"
  100.                            src="//ku.shouce.ren/files/images/201611/582c09f8ec2c6.png"></image>
  101.                   </div>
  102.                   <div style="margin-left:5;">
  103.                     <text style="font-size:20;text-align:center;">down</text>
  104.                   </div>
  105.                 </div>
  106.               </div>
  107.             </div>
  108.           </div>
  109.         </div>
  110.         <div class="shopFooter" style="flex-direction:row;margin-top:10;margin-left:10;justify-content:flex-end;">
  111.           <div style="margin-right:5;">
  112.             <image class="shopLikeImg smallImg" src="{{shopLikeImg}}"></image>
  113.           </div>
  114.           <div style="margin-right:15;">
  115.             <text class="shopLikeText" style="font-size:20;">{{shopLikeText}}</text>
  116.           </div>
  117.           <div style="margin-right:5;">
  118.             <image class="shopCommentImg smallImg" src="{{shopCommentImg}}"></image>
  119.           </div>
  120.           <div style="margin-right:15;">
  121.             <text class="shopCommentText" style="font-size:20;">{{shopCommentText}}</text>
  122.           </div>
  123.           <div style="margin-right:5;">
  124.             <image class="shopLookImg smallImg" src="{{shopLookImg}}"></image>
  125.           </div>
  126.           <div style="margin-right:15;">
  127.             <text class="shopLookText" style="font-size:20;">{{shopLookText}}</text>
  128.           </div>
  129.           <div style="margin-right:5;">
  130.             <image class="shareImg smallImg" src="{{shareImg}}"></image>
  131.           </div>
  132.           <div style="margin-right:20;">
  133.             <text class="shareText" style="font-size:20;">{{shareText}}</text>
  134.           </div>
  135.         </div>
  136.       </div>
  137.     </cell>
  138.     <loading class="refresh-view" display="{{loading_display}}" onloading="onloading">
  139.       <text class="refresh-arrow" style="text-align: center; color:rgb(238, 162, 54)" if="{{(refresh_display==='hide')}}">Load more</text>
  140.       <loading-indicator style="height:60;width:60;color:#3192e1"></loading-indicator>
  141.     </loading>
  142.   </list>
  143. </template>
  144.  
  145. <style>
  146.   .flexRow {
  147.     flex-direction: row;
  148.   }
  149.  
  150.   .flexColumn {
  151.     flex-direction: column;
  152.   }
  153.  
  154.   .text {
  155.   }
  156.  
  157.   .div {
  158.   }
  159.  
  160.   .fixed {
  161.     position: fixed;
  162.     bottom: 50px;
  163.     left: 50px;
  164.     width: 300px;
  165.     height: 50px;
  166.     align-items: center;
  167.     justify-content: center
  168.   }
  169.  
  170.   .shopImg {
  171.     width: 220;
  172.     height: 220;
  173.   }
  174.  
  175.   .list {
  176.     flex-direction: column;
  177.     overflow: hidden;
  178.     width: 750;
  179.     height: 1200;
  180.     background-color: #dddddd;
  181.   }
  182.  
  183.   .cell {
  184.     background-color: #dddddd;
  185.     flex-direction: column;
  186.     width: 750;
  187.   }
  188.  
  189.   .shopDiv {
  190.     flex-direction: column;
  191.     background-color: #ffffff;
  192.     margin: 5;
  193.     padding: 10;
  194.     border-width: 1;
  195.     border-color: #cccccc;
  196.     overflow: visible;
  197.   }
  198.  
  199.   .shopRowList {
  200.     flex-direction: column;
  201.     border-width: 1;
  202.     border-color: #cccccc;
  203.     overflow: visible;
  204.     margin: 5;
  205.     padding: 10;
  206.     background-color: #ffffff;
  207.   }
  208.  
  209.   .shopHeader {
  210.     flex-direction: row;
  211.     width: 720;
  212.   }
  213.  
  214.   .shopFooter {
  215.     flex-direction: row;
  216.     width: 720;
  217.   }
  218.  
  219.   .smallImg {
  220.     width: 20;
  221.     height: 20;
  222.   }
  223.  
  224.   .refresh-view {
  225.     height: 120px;
  226.     width: 750px;
  227.     display: -ms-flex;
  228.     display: -webkit-flex;
  229.     display: flex;
  230.     -ms-flex-align: center;
  231.     -webkit-align-items: center;
  232.     -webkit-box-align: center;
  233.     align-items: center;
  234.   }
  235. </style>
  236.  
  237. <script>
  238.   module.exports = {
  239.     data: {
  240.       refresh_display : 'hide',
  241.       loading_display : 'hide',
  242.       backgroundColor: 'red',
  243.       composite: 'false',
  244.       shopList: [
  245.         {
  246.           id: 1,
  247.           scopeValue: 1,
  248.           PersonPhoto: 'https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_60x60.jpg',
  249.           PersonName: 'Mendeleyev',
  250.           PersonVisitTime: 'today',
  251.           shopDesc: 'Genius only means hard-working all one\'s life',
  252.           shopImgList: [{
  253.             shopImgWidth: 220,
  254.             shopImgHeight: 220,
  255.             shopImg: 'https://gd2.alicdn.com/bao/uploaded/i2/TB1rtOnHpXXXXXLaXXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg'
  256.           }, {
  257.             shopImgWidth: 220,
  258.             shopImgHeight: 220,
  259.             shopImg: 'https://gd4.alicdn.com/bao/uploaded/i4/TB15KrfFVXXXXXJXXXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg'
  260.           }, {
  261.             shopImgWidth: 220,
  262.             shopImgHeight: 220,
  263.             shopImg: 'https://gd2.alicdn.com/bao/uploaded/i2/TB1t5YBGVXXXXXcaXXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg'
  264.           }],
  265.           shopLikeImg: 'https://img.alicdn.com/tps/i1/TB1jTxXIVXXXXb8XXXX07tlTXXX-200-200.png_88x88xz.jpg',
  266.           shopLikeText: '6',
  267.           shopCommentImg: 'https://img.alicdn.com/tps/i1/TB1kTKyIVXXXXacXFXX07tlTXXX-200-200.png_88x88xz.jpg',
  268.           shopCommentText: '97',
  269.           shopLookImg: 'https://img.alicdn.com/imgextra/i4/397746073/TB2IseKeFXXXXcVXXXXXXXXXXXX-397746073.png_88x88xz.jpg',
  270.           shopLookText: '1003',
  271.           shareImg: 'https://cbu01.alicdn.com/cms/upload/2015/930/224/2422039_702806130.png_88x88xz.jpg',
  272.           shareText: "10",
  273.  
  274.         },
  275.         {
  276.           id: 2,
  277.           scopeValue: 2,
  278.           PersonPhoto: 'https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_60x60.jpg',
  279.           PersonName: 'Napoleon',
  280.           PersonVisitTime: 'yesterday',
  281.           shopDesc: 'The man who has made up his mind to win will never say "impossible "',
  282.           shopImgList: [{
  283.             shopImgWidth: 220,
  284.             shopImgHeight: 220,
  285.             shopImg: 'https://gd1.alicdn.com/imgextra/i1/2655929383/TB2.qITjpXXXXcIXXXXXXXXXXXX_!!2655929383.jpg_220x220.jpg'
  286.           }, {
  287.             shopImgWidth: 220,
  288.             shopImgHeight: 220,
  289.             shopImg: 'https://gd3.alicdn.com/imgextra/i3/2655929383/TB2eWwZjpXXXXbHXXXXXXXXXXXX_!!2655929383.jpg_220x220.jpg'
  290.           }, {
  291.             shopImgWidth: 220,
  292.             shopImgHeight: 220,
  293.             shopImg: 'https://gd2.alicdn.com/imgextra/i2/2655929383/TB2tgQWjpXXXXbZXXXXXXXXXXXX_!!2655929383.jpg_220x220.jpg'
  294.           }],
  295.           shopLikeImg: 'https://img.alicdn.com/tps/i1/TB1jTxXIVXXXXb8XXXX07tlTXXX-200-200.png_88x88xz.jpg',
  296.           shopLikeText: '6',
  297.           shopCommentImg: 'https://img.alicdn.com/tps/i1/TB1kTKyIVXXXXacXFXX07tlTXXX-200-200.png_88x88xz.jpg',
  298.           shopCommentText: '97',
  299.           shopLookImg: 'https://img.alicdn.com/imgextra/i4/397746073/TB2IseKeFXXXXcVXXXXXXXXXXXX-397746073.png_88x88xz.jpg',
  300.           shopLookText: '1003',
  301.           shareImg: 'https://cbu01.alicdn.com/cms/upload/2015/930/224/2422039_702806130.png_88x88xz.jpg',
  302.           shareText: "10",
  303.  
  304.         }, {
  305.           id: 10,
  306.           scopeValue: 5,
  307.           PersonPhoto: 'https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_60x60.jpg',
  308.           PersonName: 'YIMING',
  309.           PersonVisitTime: 'yesterday',
  310.           shopDesc: 'The secret of success is constancy to purpose',
  311.           shopImgList: [{
  312.             shopImgWidth: 220,
  313.             shopImgHeight: 220,
  314.             shopImg: 'https://gd3.alicdn.com/bao/uploaded/i3/TB17zXOGXXXXXbEXVXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg'
  315.           }, {
  316.             shopImgWidth: 220,
  317.             shopImgHeight: 220,
  318.             shopImg: 'https://gd1.alicdn.com/imgextra/i1/2265445951/TB22ACTbFXXXXXBXXXXXXXXXXXX_!!2265445951.jpg_220x220.jpg'
  319.           }, {
  320.             shopImgWidth: 220,
  321.             shopImgHeight: 220,
  322.             shopImg: 'https://gd3.alicdn.com/imgextra/i3/2265445951/TB2oXqUbFXXXXXIXXXXXXXXXXXX_!!2265445951.jpg_220x220.jpg'
  323.           }],
  324.           shopLikeImg: 'https://img.alicdn.com/tps/i1/TB1jTxXIVXXXXb8XXXX07tlTXXX-200-200.png_88x88xz.jpg',
  325.           shopLikeText: '6',
  326.           shopCommentImg: 'https://img.alicdn.com/tps/i1/TB1kTKyIVXXXXacXFXX07tlTXXX-200-200.png_88x88xz.jpg',
  327.           shopCommentText: '97',
  328.           shopLookImg: 'https://img.alicdn.com/imgextra/i4/397746073/TB2IseKeFXXXXcVXXXXXXXXXXXX-397746073.png_88x88xz.jpg',
  329.           shopLookText: '1003',
  330.           shareImg: 'https://cbu01.alicdn.com/cms/upload/2015/930/224/2422039_702806130.png_88x88xz.jpg',
  331.           shareText: "10",
  332.         }
  333.       ],
  334.     },
  335.     methods: {
  336.       oncellclick: function(e) {
  337.         this.$call('modal', 'toast', {
  338.           'message': 'row ' + e.target.attr.rownumber + ' clicked',
  339.           'duration': 2.0
  340.         });
  341.       },
  342.       onfixedclick: function(e) {
  343.         if (e.target.style.backgroundColor == 'red') {
  344.           this.backgroundColor = 'green';
  345.           this.composite = true;
  346.         }
  347.         else {
  348.           this.backgroundColor = 'red';
  349.           this.composite = false;
  350.         }
  351.       },
  352.       onloading: function (e) {
  353.         this.loading_display = "show"
  354.         setTimeout(function () {
  355.           this.loading_display = 'hide'
  356.         }.bind(this), 1000)
  357.       }
  358.     }
  359.  
  360.   }
  361. </script>


还没有评论.