< slider > 组件

[Erwin11]

本文档已迁移至 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属性，他显示正在展示的图片的索引序号。

基本事件：查阅基本事件

• 支持click事件:查阅基本事件
• 支持appear / disapper事件:查阅基本事件

例子

 
<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>

[lvscar]

THX! , 已经部署。
后续翻译完成后，可以直接通过给Weex主仓库 doc分枝 提交PR 。 PR内容可以参考 这次变更

[iceyao]

当引用slider组件的页面很长一段时间不作操作后，因为slider组件采用transform: translate3d(x, y, z)，切换 x 值以达到
滑块偏移的效果，但是当 x 值增加到几百万的时候，由于数值
过大，偏移效果失效，所以看起来就只有 display: block 和 display: none 的
感觉了。

[suyimo]

轮播可以上下滑动吗

[yuanzx]

轮播过渡时间太快，过渡效果是否可以控制？

[yundongbot]

@yuanzx 可以，slider 组件可通过 interval 特性定义间隔时间

[yundongbot]

@suyimo 目前暂不支持，你可以到 issues 发起讨论。

[yundongbot]

@yuanzx
slider 组件支持 interval 特性控制切换时间
可参考新版文档 http://alibaba.github.io/weex/cn/doc/components/slider.html

[yundongbot]

本文档已迁移至 https://weex-project.io/cn/references/components/slider.html ，此处不再维护，谢谢。

[SeongBrave]

<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 扫一扫一直没有反应，是不是因为版本问题呢？？？

[yundongbot]

@SeongBrave 这是 vue 的语法。文件格式是 .vue。

[SeongBrave]

@DoranYun 您好， 我的weex 版本是v1.0.1-beta.5 上面的code 怎么就可以通过显示出效果了?

[taylor-swift-1989]

怎样初始化 第二个 直接切换到第二个 ；切换到想要的那个上 新的页面没法评论，也看不到