| <template> |
| <div style="padding: 25px"> |
| <div style="height: 80px; flex-direction: row;"> |
| <div style="flex: 1;background-color: darkcyan;justify-content: center;align-items: center" onclick="goto(0)"> |
| <text class="page-title">Page 1</text> |
| </div> |
| <div style="flex: 1;background-color: aquamarine;justify-content: center;align-items: center" onclick="goto(1)"> |
| <text class="page-title">Page 2</text> |
| </div> |
| <div style="flex: 1;background-color: darkcyan;justify-content: center;align-items: center" onclick="goto(2)"> |
| <text class="page-title">Page 3</text> |
| </div> |
| </div> |
| <div style="height: 10px;background-color: skyblue"> |
| <div style="width: 233px;height: 10px;margin-left:{{progress}}; background-color:darkblue"></div> |
| </div> |
| <slider class="slider" interval="4500" onchange="onchange" append="tree" index="{{index}}" onscroll="onscroll" |
| onchange="onchange" offset-x-accuracy="0.01"> |
| <div class="frame" repeat="{{img in imageList}}"> |
| <image class="image" resize="cover" src="{{img.src}}"></image> |
| <text class="title">{{img.title}}</text> |
| </div> |
| <indicator style="height: 20px"></indicator> |
| </slider> |
| </div> |
| </template> |
| <style> |
| .page-title { |
| color: black; |
| font-size: 40px; |
| font-weight: bold; |
| } |
| |
| .image { |
| width: 700px; |
| height: 700px; |
| } |
| |
| .slider { |
| width: 700px; |
| height: 700px; |
| position: absolute; |
| border-width: 2px; |
| border-style: solid; |
| border-color: #41B883; |
| } |
| |
| .title { |
| position: absolute; |
| top: 20px; |
| left: 20px; |
| padding-left: 20px; |
| width: 200px; |
| color: #FFFFFF; |
| font-size: 36px; |
| line-height: 60px; |
| background-color: rgba(0, 0, 0, 0.3); |
| } |
| |
| .frame { |
| width: 700px; |
| height: 700px; |
| } |
| </style> |
| <script> |
| export default { |
| data: { |
| imageList: [ |
| {title: 'Page 1', src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'}, |
| { |
| title: 'Page 2', |
| src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg' |
| }, |
| { |
| title: 'Page 3', |
| src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg' |
| } |
| ], |
| index: 0, |
| progress: 0, |
| }, |
| methods: { |
| onchange (event) { |
| console.log('changed:', event.index) |
| }, |
| goto (i) { |
| this.index = i; |
| this.progress = i * 233; |
| }, |
| onscroll (e) { |
| var ratio = parseFloat(e.offsetXRatio); |
| this.progress = 233 * this.index + (233 * -ratio); |
| }, |
| onchange (e) { |
| this.goto(parseInt(e.index)); |
| } |
| } |
| } |
| </script> |
| |