Weexapp development Process (iii) other page creation

1. Home

(1) Carousel diagram

Step one: Create a Carousel Diagram component (Slider.vue)

Src/assets/components/slider.vue

<!--Carousel Diagram component--><template> <slider class= "Slider" auto-play= "true" interval= "@change =" onchange " > <div class= "Frame" v-for= "img in imageList" > <image class= "image" Resize= "cover": src= "IMG.SRC" >& lt;/image> </div> <indicator class= "indicator" ></indicator> </slider></template>&  Lt;style scoped>. iconfont {font-family:iconfont;    }. image {width:750px;  height:430px;    }. slider {width:750px;  height:430px;    }. frame {width:750px;    height:430px;  position:relative;    }. indicator {width:750px;    height:40px;    Item-color:white;    Item-selected-color: #b4282d;    item-size:12px;    Position:absolute;    bottom:10px;  right:0px; }</style><script> export Default {props:["ImageList"], data () {return {}}, methods : {onchange (event) {}}}</script>

Step Two: Page call

Src/assets/views/home.vue

<!--home--><template> <div class= "wrapper" > <!--title bar--<wxc-minibar title= "Home"    Right-button= "n" left-button= "n" background-color= "#F2F3F4" text-color= "#333333" ></wxc-minibar> <!--scrolling View-<scroller class= "Main-list" > <!--Carousel--<kx-slider:imagelist= "Banners "></kx-slider> </scroller> </div></template><script>//Introduction of Carousel Diagram Components Import slider fr Om '.  /components/slider.vue ';  Introduce UI component import {Wxcminibar} from ' Weex-ui '; Export Default {components: {' Kx-slider ': Slider, Wxcminibar}, data () {return {Banner S: [{title: ', src: ' http://app.kuitao8.com/images/banner/1.jpg '}, {title: ', src: ' http://app.kuit    Ao8.com/images/banner/2.jpg '}, {title: ', src: ' http://app.kuitao8.com/images/banner/3.jpg '}]} }}</script><style scoped>. wrapper{}. Iconfont {Font-family:iconfont;    }. main-list{position:fixed;    top:91px;    bottom:90px;    left:0;  right:0; }</style>

：

(2) Slide navigation bar

Weexapp development Process (iii) other page creation