阿里云赞助

<slider>

<slider>

Summary

A slide’s player to show slides (mostly as pictures) one page by another. The default interval between two slides is 3 seconds.

Child Components

It supports all kinds of weex components as its slides, especially the indicator component which can be used only as a child component of slider.

Attributes

  • auto-play: <boolean> true | false. This value determines whether the slides plays automatically after the page rendering finished. The default value is false.
  • interval: <number> millisecond. This value determines time interval for each page displayed in slider.
  • index: . This value determines the index of current shown slide. The default value is 0.
  • offset-x-accuracy {float}:set the scroll event trigger precision, precision value represents the rolling distance of a page width ratio.

Styles

common styles: check out common styles for components

  • support flexbox related styles
  • support box model related styles
  • support position related styles
  • support opacity, background-color etc.

Events

  • change: triggerd when the slide’s index is changed. The event object contains the attribute of index, which is the index number of the currently shown slide.
  • scroll 0.11+:this event is fired when scrolling. The current offsetXRatio value is given in this event callback.

common events: check out the common events

Example

<template>
<div>
<slider class="slider" interval="3000" auto-play="true">
<div class="frame" v-for="img in imageList">
<image class="image" resize="cover" :src="img.src"></image>
</div>
</slider>
</div>
</template>
<style scoped>
.image {
width: 700px;
height: 700px;
}
.slider {
margin-top: 25px;
margin-left: 25px;
width: 700px;
height: 700px;
border-width: 2px;
border-style: solid;
border-color: #41B883;
}
.frame {
width: 700px;
height: 700px;
position: relative;
}
</style>
<script>
export default {
data () {
return {
imageList: [
{ src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
{ src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
{ src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
]
}
}
}
</script>

try it

Apache Incubator
Disclaimer: Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.


ApacheCopyright(c) 2017 The Apache Software Foundation. Licensed under the Apache License, Version 2.0