• <slider>
    • 简介
    • 子组件
    • 属性
    • 样式
    • 事件
    • Vue 示例
    • Rax 示例

    <slider>

    简介

    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>
    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>
    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';
    7. const App  = () => {
    8.   const handleChange = (idx) {
    9.     console.log('change to ', idx);
    10.   }
    12.   return (
    13.     <View>
    14.       <Slider
    15.         className="slider"
    16.         width="750"
    17.         height="500"
    18.     autoPlay
    19.         onChange={handleChange}
    20.       >
    21.         <View style={styles.itemWrap}>
    22.           <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png'}} />
    23.         </View>
    24.         <View style={styles.itemWrap}>
    25.           <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png'}} />
    26.         </View>
    27.         <View style={styles.itemWrap}>
    28.           <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png'}} />
    29.         </View>
    30.       </Slider>
    31.     </View>
    32.   );
    33. }
    35. render(<App />, document.body, { driver: Driver });

    rax-slider 文档