加载中...

Slider

实例代码 

  1. <template>
  2.   <scroller class="body">
  3.  
  4.     <wxc-panel title="auto-play" type="primary">
  5.       <wxc-panel title="auto-play = false" padding-body="0">
  6.         <slider class="slider" append="tree" interval="{{sliders[1].interval}}" auto-play="false">
  7.           <indicator class="indicator"></indicator>
  8.           <slider-page repeat="{{sliders[1].sliderPages}}"></slider-page>
  9.         </slider>
  10.       </wxc-panel>
  11.  
  12.       <wxc-panel title="auto-play = true" padding-body="0">
  13.         <slider class="slider" append="tree" interval="{{sliders[0].interval}}" auto-play="{{sliders[0].autoPlay}}">
  14.           <indicator class="indicator"></indicator>
  15.           <slider-page repeat="{{sliders[0].sliderPages}}"></slider-page>
  16.         </slider>
  17.       </wxc-panel>
  18.     </wxc-panel>
  19.  
  20.     <wxc-panel title="Event, {{eventCnt}} change" type="primary">
  21.       <slider class="slider" append="tree" interval="{{sliders[0].interval}}" auto-play="{{sliders[0].autoPlay}}"
  22.               onchange="handleSliderChange">
  23.         <indicator class="indicator"></indicator>
  24.         <slider-page repeat="{{sliders[0].sliderPages}}"></slider-page>
  25.       </slider>
  26.     </wxc-panel>
  27.  
  28.     <wxc-panel title="Indicator" type="primary">
  29.       <wxc-panel title="default style" padding-body="0">
  30.         <slider class="slider" append="tree" interval="{{sliders[0].interval}}" auto-play="{{sliders[0].autoPlay}}"
  31.                 onchange="handleSliderChange">
  32.           <indicator class="indicator"></indicator>
  33.           <slider-page repeat="{{sliders[0].sliderPages}}"></slider-page>
  34.         </slider>
  35.       </wxc-panel>
  36.  
  37.       <wxc-panel title="width & height" padding-body="0">
  38.         <slider class="slider" append="tree" interval="{{sliders[0].interval}}" auto-play="{{sliders[0].autoPlay}}">
  39.           <indicator style="itemColor: #dddddd;width:714;height:460;"></indicator>
  40.           <slider-page repeat="{{sliders[0].sliderPages}}"></slider-page>
  41.         </slider>
  42.       </wxc-panel>
  43.  
  44.       <wxc-panel title="left & top" padding-body="0">
  45.         <slider class="slider" append="tree" interval="{{sliders[1].interval}}" auto-play="{{sliders[1].autoPlay}}">
  46.           <indicator class="indicator" style="top:-140;left:-240"></indicator>
  47.           <slider-page repeat="{{sliders[1].sliderPages}}"></slider-page>
  48.         </slider>
  49.       </wxc-panel>
  50.  
  51.       <wxc-panel title="itemColor & itemSelectedColor" padding-body="0">
  52.         <slider class="slider" append="tree" interval="{{sliders[2].interval}}" auto-play="{{sliders[2].autoPlay}}">
  53.           <indicator class="indicator" style="itemSelectedColor:rgb(217, 83, 79);"></indicator>
  54.           <slider-page repeat="{{sliders[2].sliderPages}}"></slider-page>
  55.         </slider>
  56.       </wxc-panel>
  57.  
  58.       <wxc-panel title="itemSize" padding-body="0">
  59.         <slider class="slider" append="tree" interval="{{sliders[1].interval}}" auto-play="{{sliders[1].autoPlay}}">
  60.           <indicator style="itemColor: #dddddd;itemSize:40;top:140;left:180;width:700;height:380;"></indicator>
  61.           <slider-page repeat="{{sliders[1].sliderPages}}"></slider-page>
  62.         </slider>
  63.       </wxc-panel>
  64.  
  65.     </wxc-panel>
  66.  
  67.   </scroller>
  68.  
  69. </template>
  70.  
  71. <script>
  72.   require('weex-components');
  73.   var img0 = '//gw.alicdn.com/tps/i2/TB1DpsmMpXXXXabaXXX20ySQVXX-512-512.png_400x400.jpg';
  74.   var img1 = '//gw.alicdn.com/tps/i1/TB1M3sQMpXXXXakXXXXApNeJVXX-360-360.png';
  75.   module.exports = {
  76.     data: {
  77.       eventCnt: 0,
  78.       togglePlayMsg: 'pause',
  79.       sliders: [
  80.         {
  81.           interval: 1000,
  82.           autoPlay: true,
  83.           sliderPages: [
  84.             {
  85.               items: [
  86.                 {
  87.                   image: img0,
  88.                   link: '//h5.m.taobao.com/1'
  89.                 },
  90.                 {
  91.                   image: img0,
  92.                   link: '//h5.m.taobao.com/1'
  93.                 }
  94.               ]
  95.             },
  96.             {
  97.               items: [
  98.                 {
  99.                   image: img1,
  100.                   link: '//h5.m.taobao.com/1'
  101.                 },
  102.                 {
  103.                   image: img1,
  104.                   link: '//h5.m.taobao.com/1'
  105.                 }
  106.               ]
  107.             },
  108.             {
  109.               items: [
  110.                 {
  111.                   image: img0,
  112.                   link: '//h5.m.taobao.com/1'
  113.                 },
  114.                 {
  115.                   image: img1,
  116.                   link: '//h5.m.taobao.com/1'
  117.                 }
  118.               ]
  119.             }
  120.           ]
  121.         },
  122.         {
  123.           interval: 3000,
  124.           autoPlay: true,
  125.           sliderPages: [
  126.             {
  127.               items: [
  128.                 {
  129.                   image: img0,
  130.                   link: '//h5.m.taobao.com/1'
  131.                 },
  132.                 {
  133.                   image: img0,
  134.                   link: '//h5.m.taobao.com/1'
  135.                 }
  136.               ]
  137.             },
  138.             {
  139.               items: [
  140.                 {
  141.                   image: img1,
  142.                   link: '//h5.m.taobao.com/1'
  143.                 },
  144.                 {
  145.                   image: img1,
  146.                   link: '//h5.m.taobao.com/1'
  147.                 }
  148.               ]
  149.             },
  150.             {
  151.               items: [
  152.                 {
  153.                   image: img0,
  154.                   link: '//h5.m.taobao.com/1'
  155.                 },
  156.                 {
  157.                   image: img1,
  158.                   link: '//h5.m.taobao.com/1'
  159.                 }
  160.               ]
  161.             }
  162.           ]
  163.         },
  164.         {
  165.           interval: 5000,
  166.           autoPlay: true,
  167.           sliderPages: [
  168.             {
  169.               items: [
  170.                 {
  171.                   image: img0,
  172.                   link: '//h5.m.taobao.com/1'
  173.                 },
  174.                 {
  175.                   image: img0,
  176.                   link: '//h5.m.taobao.com/1'
  177.                 }
  178.               ]
  179.             },
  180.             {
  181.               items: [
  182.                 {
  183.                   image: img1,
  184.                   link: '//h5.m.taobao.com/1'
  185.                 },
  186.                 {
  187.                   image: img1,
  188.                   link: '//h5.m.taobao.com/1'
  189.                 }
  190.               ]
  191.             },
  192.             {
  193.               items: [
  194.                 {
  195.                   image: img0,
  196.                   link: '//h5.m.taobao.com/1'
  197.                 },
  198.                 {
  199.                   image: img1,
  200.                   link: '//h5.m.taobao.com/1'
  201.                 }
  202.               ]
  203.             }
  204.           ]
  205.         }
  206.       ]
  207.     },
  208.     methods: {
  209.       ready: function() {
  210.       },
  211.       togglePlay: function() {
  212.         var autoPlay = this.sliders[0].autoPlay
  213.         autoPlay = !autoPlay
  214.         this.sliders[0].autoPlay = autoPlay
  215.         this.togglePlayMsg = autoPlay ? 'pause' : 'play'
  216.       },
  217.       handleSliderChange: function() {
  218.         var nowCnt = this.eventCnt + 1
  219.         this.eventCnt = nowCnt
  220.       },
  221.       setInterval1: function() {
  222.         this.sliders[0].interval = 1000;
  223.       },
  224.       setInterval3: function() {
  225.         this.sliders[0].interval = 3000;
  226.       },
  227.       setInterval5: function() {
  228.         this.sliders[0].interval = 5000;
  229.       }
  230.     }
  231.   };
  232. </script>
  233.  
  234. <style>
  235.   .body {
  236.     background-color: #ffffff;
  237.   }
  238.  
  239.   .slider {
  240.     flex-direction: row;
  241.     /*margin-left: 18;*/
  242.     /*margin-right: 18;*/
  243.     width: 690;
  244.     height: 360;
  245.   }
  246.  
  247.   .indicator {
  248.     position: absolute;
  249.     width: 690;
  250.     height: 420;
  251.     top: 140;
  252.     left: 240;
  253.     itemColor: #dddddd;
  254.     itemSelectedColor: rgb(40, 96, 144);
  255.   }
  256. </style>
还没有评论.