| <template> |
| <scroller class="body"> |
| |
| <wxc-panel title="auto-play" type="primary"> |
| <wxc-panel title="auto-play = false" padding-body="0"> |
| <slider class="slider" append="tree" interval="{{sliders[1].interval}}" auto-play="false"> |
| <indicator class="indicator"></indicator> |
| <slider-page repeat="{{sliders[1].sliderPages}}"></slider-page> |
| </slider> |
| </wxc-panel> |
| |
| <wxc-panel title="auto-play = true" padding-body="0"> |
| <slider class="slider" append="tree" interval="{{sliders[0].interval}}" auto-play="{{sliders[0].autoPlay}}"> |
| <indicator class="indicator"></indicator> |
| <slider-page repeat="{{sliders[0].sliderPages}}"></slider-page> |
| </slider> |
| </wxc-panel> |
| |
| <wxc-panel title="auto-play = true & scrollable = false" padding-body="0"> |
| <slider class="slider" append="tree" interval="{{sliders[0].interval}}" auto-play="{{sliders[0].autoPlay}}" scrollable="false"> |
| <indicator class="indicator"></indicator> |
| <slider-page repeat="{{sliders[0].sliderPages}}"></slider-page> |
| </slider> |
| </wxc-panel> |
| </wxc-panel> |
| |
| <wxc-panel title="Event, {{eventCnt}} change" type="primary"> |
| <slider class="slider" append="tree" interval="{{sliders[0].interval}}" auto-play="{{sliders[0].autoPlay}}" |
| onchange="handleSliderChange"> |
| <indicator class="indicator"></indicator> |
| <slider-page repeat="{{sliders[0].sliderPages}}"></slider-page> |
| </slider> |
| </wxc-panel> |
| |
| <wxc-panel title="Indicator" type="primary"> |
| <wxc-panel title="default style" padding-body="0"> |
| <slider class="slider" append="tree" interval="{{sliders[0].interval}}" auto-play="{{sliders[0].autoPlay}}" |
| onchange="handleSliderChange"> |
| <indicator class="indicator"></indicator> |
| <slider-page repeat="{{sliders[0].sliderPages}}"></slider-page> |
| </slider> |
| </wxc-panel> |
| |
| <wxc-panel title="width & height" padding-body="0"> |
| <slider class="slider" append="tree" interval="{{sliders[0].interval}}" auto-play="{{sliders[0].autoPlay}}"> |
| <indicator style="itemColor: #dddddd;width:714;height:460;"></indicator> |
| <slider-page repeat="{{sliders[0].sliderPages}}"></slider-page> |
| </slider> |
| </wxc-panel> |
| |
| <wxc-panel title="left & top" padding-body="0"> |
| <slider class="slider" append="tree" interval="{{sliders[1].interval}}" auto-play="{{sliders[1].autoPlay}}"> |
| <indicator class="indicator" style="top:-140;left:-240"></indicator> |
| <slider-page repeat="{{sliders[1].sliderPages}}"></slider-page> |
| </slider> |
| </wxc-panel> |
| |
| <wxc-panel title="itemColor & itemSelectedColor" padding-body="0"> |
| <slider class="slider" append="tree" interval="{{sliders[2].interval}}" auto-play="{{sliders[2].autoPlay}}"> |
| <indicator class="indicator" style="itemSelectedColor:rgb(217, 83, 79);"></indicator> |
| <slider-page repeat="{{sliders[2].sliderPages}}"></slider-page> |
| </slider> |
| </wxc-panel> |
| |
| <wxc-panel title="itemSize" padding-body="0"> |
| <slider class="slider" append="tree" interval="{{sliders[1].interval}}" auto-play="{{sliders[1].autoPlay}}"> |
| <indicator style="itemColor: #dddddd;itemSize:40;top:140;left:180;width:700;height:380;"></indicator> |
| <slider-page repeat="{{sliders[1].sliderPages}}"></slider-page> |
| </slider> |
| </wxc-panel> |
| |
| </wxc-panel> |
| |
| </scroller> |
| |
| </template> |
| |
| <script> |
| require('weex-components'); |
| var img0 = '//gw.alicdn.com/tps/i2/TB1DpsmMpXXXXabaXXX20ySQVXX-512-512.png_400x400.jpg'; |
| var img1 = '//gw.alicdn.com/tps/i1/TB1M3sQMpXXXXakXXXXApNeJVXX-360-360.png'; |
| module.exports = { |
| data: { |
| eventCnt: 0, |
| togglePlayMsg: 'pause', |
| sliders: [ |
| { |
| interval: 1000, |
| autoPlay: true, |
| sliderPages: [ |
| { |
| items: [ |
| { |
| image: img0, |
| link: '//h5.m.taobao.com/1' |
| }, |
| { |
| image: img0, |
| link: '//h5.m.taobao.com/1' |
| } |
| ] |
| }, |
| { |
| items: [ |
| { |
| image: img1, |
| link: '//h5.m.taobao.com/1' |
| }, |
| { |
| image: img1, |
| link: '//h5.m.taobao.com/1' |
| } |
| ] |
| }, |
| { |
| items: [ |
| { |
| image: img0, |
| link: '//h5.m.taobao.com/1' |
| }, |
| { |
| image: img1, |
| link: '//h5.m.taobao.com/1' |
| } |
| ] |
| } |
| ] |
| }, |
| { |
| interval: 3000, |
| autoPlay: true, |
| sliderPages: [ |
| { |
| items: [ |
| { |
| image: img0, |
| link: '//h5.m.taobao.com/1' |
| }, |
| { |
| image: img0, |
| link: '//h5.m.taobao.com/1' |
| } |
| ] |
| }, |
| { |
| items: [ |
| { |
| image: img1, |
| link: '//h5.m.taobao.com/1' |
| }, |
| { |
| image: img1, |
| link: '//h5.m.taobao.com/1' |
| } |
| ] |
| }, |
| { |
| items: [ |
| { |
| image: img0, |
| link: '//h5.m.taobao.com/1' |
| }, |
| { |
| image: img1, |
| link: '//h5.m.taobao.com/1' |
| } |
| ] |
| } |
| ] |
| }, |
| { |
| interval: 5000, |
| autoPlay: true, |
| sliderPages: [ |
| { |
| items: [ |
| { |
| image: img0, |
| link: '//h5.m.taobao.com/1' |
| }, |
| { |
| image: img0, |
| link: '//h5.m.taobao.com/1' |
| } |
| ] |
| }, |
| { |
| items: [ |
| { |
| image: img1, |
| link: '//h5.m.taobao.com/1' |
| }, |
| { |
| image: img1, |
| link: '//h5.m.taobao.com/1' |
| } |
| ] |
| }, |
| { |
| items: [ |
| { |
| image: img0, |
| link: '//h5.m.taobao.com/1' |
| }, |
| { |
| image: img1, |
| link: '//h5.m.taobao.com/1' |
| } |
| ] |
| } |
| ] |
| } |
| ] |
| }, |
| methods: { |
| ready: function() { |
| }, |
| togglePlay: function() { |
| var autoPlay = this.sliders[0].autoPlay |
| autoPlay = !autoPlay |
| this.sliders[0].autoPlay = autoPlay |
| this.togglePlayMsg = autoPlay ? 'pause' : 'play' |
| }, |
| handleSliderChange: function() { |
| var nowCnt = this.eventCnt + 1 |
| this.eventCnt = nowCnt |
| }, |
| setInterval1: function() { |
| this.sliders[0].interval = 1000; |
| }, |
| setInterval3: function() { |
| this.sliders[0].interval = 3000; |
| }, |
| setInterval5: function() { |
| this.sliders[0].interval = 5000; |
| } |
| } |
| }; |
| </script> |
| |
| <style> |
| .body { |
| background-color: #ffffff; |
| } |
| |
| .slider { |
| flex-direction: row; |
| /*margin-left: 18;*/ |
| /*margin-right: 18;*/ |
| width: 690; |
| height: 360; |
| } |
| |
| .indicator { |
| position: absolute; |
| width: 690; |
| height: 420; |
| top: 140; |
| left: 240; |
| itemColor: #dddddd; |
| itemSelectedColor: rgb(40, 96, 144); |
| } |
| </style> |