weex项目利用weex组件实现图片的轮播效果

html代码：

 1 <template>
 2   <div>
 3     <slider class="slider" auto-play="true" interval="2000" @change="onchange">//auto-play="true"用来设置图片轮播，当值为true时，就会轮播，否侧侧不会轮播，默认为false
 4       <div class="frame" v-for="img in imageList">
 5         <image class="image" resize="cover" :src="img.src"></image>
 6         <text class="title">{{img.title}}</text>
 7       </div>
 8       <indicator class="indicator"></indicator>
 9     </slider>
10   </div>
11 </template>

css代码：

 1 <style>
 2   .image {
 3     width: 700px;
 4     height: 700px;
 5   }
 6   .slider {
 7     margin-top: 25px;
 8     margin-left: 25px;
 9     width: 700px;
10     height: 700px;
11     border-width: 2px;
12     border-style: solid;
13     border-color: #41B883;
14   }
15   .title {
16     position: absolute;
17     top: 20px;
18     left: 20px;
19     padding-left: 20px;
20     width: 200px;
21     color: #FFFFFF;
22     font-size: 36px;
23     line-height: 60px;
24     background-color: rgba(0, 0, 0, 0.3);
25   }
26   .frame {
27     width: 700px;
28     height: 700px;
29     position: relative;
30   }
31   .indicator {
32     width: 700px;
33     height: 700px;
34     item-color: green;
35     item-selected-color: red;
36     item-size: 50px;
37     position: absolute;
38     top: 200px;
39     left: 200px;
40   }
41 </style>

JavaScript代码：

 1 <script>
 2   export default {
 3     data () {
 4       return {
 5         imageList: [
 6           { title: 'item A', src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
 7           { title: 'item B', src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
 8           { title: 'item C', src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
 9         ]
10       }
11     },
12     methods: {
13       onchange (event) {
14         console.log('changed:', event.index)
15       }
16     }
17   }
18 </script>

想了解更多weex的相关组件可以 到 http://weex.apache.org/cn/references/index.html 学习了解！

posted @ 2017-12-25 15:15  Don't差不多  阅读(470)  评论(0)  编辑  收藏  举报