< slider > 组件 #47

Open
Erwin11 opened this Issue Jul 15, 2016 · 8 comments

Projects

None yet

6 participants

@Erwin11
Erwin11 commented Jul 15, 2016 edited

本文档已迁移至 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>
@lvscar
lvscar commented Jul 18, 2016

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

@iceyao
iceyao commented Aug 3, 2016

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

@suyimo
suyimo commented Nov 7, 2016

轮播可以上下滑动吗

@yuanzx
yuanzx commented Nov 9, 2016

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

@DoranYun

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

@DoranYun
DoranYun commented Dec 9, 2016

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

@DoranYun
DoranYun commented Dec 9, 2016

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

@DoranYun

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment