我的书签
添加书签
移除书签简介
Slider 组件用于在一个页面中展示多个图片，在前端这种效果被称为轮播图。默认的轮播间隔为3秒。
子组件
支持任意类型的 Weex 组件作为其子组件。你也可以放置一个 indicator 组件用于显示轮播指示器。indicator 也只能作为 Slider 的子组件使用。indicator 不能再包含其它子组件了。
属性
- auto-play , boolean. 组件渲染完成时，是否自动开始播放，默认为 false.
- interval , number（ms）. 轮播间隔，默认为 3000ms。
- index , number. 设置显示slider的第几个页面。
- offset-x-accuracy , number. 控制
onscroll事件触发的频率，默认值为10，表示两次onscroll事件之间滚动容器至少滚动了10px。将该值设置为较小的数值会提高滚动事件采样的精度，但同时也会降低页面的性能。 - show-indicators , boolean. 是否显示指示器。尽管
show-indicator的默认值是true，本属性只有在slider下包含<indicator>时才有意义。 - infinite , boolean. 设置是否可以无限轮播，默认为 true。
- scrollable , boolean. 设置是否可以通过滑动手势来切换页面，默认为 true。
- keep-index , boolean, . 设置轮播器中的数据发生变化后是否保持变化前的页面序号。
- forbid-slide-animation , boolean, . iOS 平台默认支持动画，使用该属性可以强制关闭切换时的动画。
样式
- 通用样式 支持所有通用样式。
事件
- 通用事件 支持所有通用事件。
- change 当轮播索引改变时，触发该事件。该事件给前端的参数中含有
index表示当前切换到的序号。 - scroll 列表发生滚动时将会触发该事件。在参数中有
offsetXRatio，它表示当前图片偏移的比率，取值范围是 [-1, 1]。负值表示当前图片向左滑，正值表示向右划。比如 -0.2 表示当前图片向左滑，并且有 20% 的区域超出了容器边缘。
Vue 示例
1. <template>
2. <div>
3. <slider class="slider" interval="3000" auto-play="true">
4. <div class="frame" v-for="img in imageList">
5. <image class="image" resize="cover" :src="img.src"></image>
6. </div>
7. </slider>
8. </div>
9. </template>
10. 11. <style scoped>
12. .image {
13. width: 700px;
14. height: 700px;
15. }
16. .slider {
17. margin-top: 25px;
18. margin-left: 25px;
19. width: 700px;
20. height: 700px;
21. border-width: 2px;
22. border-style: solid;
23. border-color: #41B883;
24. }
25. .frame {
26. width: 700px;
27. height: 700px;
28. position: relative;
29. }
30. </style>
31. 32. <script>
33. export default {
34. data () {
35. return {
36. imageList: [
37. { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
38. { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
39. { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
40. ]
41. }
42. }
43. }
44. </script>
- 示例
- 滚动事件示例
- 自动播放和indicator示例
- Ocean示例
Rax 示例
rax-slider 是 <slider> 组件的上层封装，抹平了 Web 和 Weex 的展现
1. import { createElement, Component, render, createRef } from 'rax';
2. import View from 'rax-view';
3. import Image from 'rax-image';
4. import Slider from 'rax-slider';
5. import Driver from 'driver-universal';
6. 7. const App = () => {
8. const handleChange = (idx) {
9. console.log('change to ', idx);
10. }
11. 12. return (
13.
rax-slider 文档
