weexteam
< slider > 组件
本文档已迁移至 https://weex-project.io/cn/references/components/slider.html ，此处不再维护，谢谢。
< slider > 组件
概述
轮播组件用于在一个网页中展示多个图片。初始设置是3秒内在2个图片做切换。
子组件
weex 所有的组件都支持轮播，特定的indicator组件只能是slider的子组件。
属性
-
auto-play:<布尔值>true|false.该值决定网页渲染完成之后是否自动播放。初始值的是关。
其他属性请查阅基本属性
样式
基础样式：请查阅基本样式
- 支持flexbox相关样式
- 支持盒模型相关样式
- 支持
position相关样式 - 支持
opacity,background-color等.
事件
-
change:当轮播索引改变时的钩子。事件对象包含index属性，他显示正在展示的图片的索引序号。
基本事件：查阅基本事件
例子
<template>
<div>
<slider auto-play="true" onchange="change" style="...">
<image repeat="{{imageList}}" src="{{src}}" style="..."></image>
<indicator></indicator>
</slider>
</div>
</template>
<script>
module.exports = {
data: {
imageList: [{src: '...'}, {src: '...'}, ...]
},
methods: {
change: function (e) {
// e.index
}
}
}
</script>
当引用slider组件的页面很长一段时间不作操作后，因为slider组件采用transform: translate3d(x, y, z)，切换 x 值以达到 滑块偏移的效果，但是当 x 值增加到几百万的时候，由于数值 过大，偏移效果失效，所以看起来就只有 display: block 和 display: none 的 感觉了。
@yuanzx
slider 组件支持 interval 特性控制切换时间
可参考新版文档 http://alibaba.github.io/weex/cn/doc/components/slider.html
本文档已迁移至 https://weex-project.io/cn/references/components/slider.html ，此处不再维护，谢谢。
<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>
使用上面的代码，然后使用 weex slider.we -o ./test 输出js，然后使用weex playground 扫一扫一直没有反应，是不是因为版本问题呢？？？
