Slider 组件用于在一个页面中展示多个图片,在前端这种效果被称为轮播图。默认的轮播间隔为3秒。
支持任意类型的 Weex 组件作为其子组件。你也可以放置一个 indicator
组件用于显示轮播指示器。indicator
也只能作为 Slider
的子组件使用。indicator
不能再包含其它子组件了。
onscroll
事件触发的频率,默认值为10,表示两次 onscroll
事件之间滚动容器至少滚动了10px。将该值设置为较小的数值会提高滚动事件采样的精度,但同时也会降低页面的性能。show-indicator
的默认值是true,本属性只有在slider下包含 <indicator>
时才有意义。index
表示当前切换到的序号。offsetXRatio
,它表示当前图片偏移的比率,取值范围是 [-1, 1]。负值表示当前图片向左滑,正值表示向右划。比如 -0.2 表示当前图片向左滑,并且有 20% 的区域超出了容器边缘。<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>
rax-slider
是 <slider>
组件的上层封装,抹平了 Web 和 Weex 的展现
import { createElement, Component, render, createRef } from 'rax'; import View from 'rax-view'; import Image from 'rax-image'; import Slider from 'rax-slider'; import Driver from 'driver-universal'; const App = () => { const handleChange = (idx) { console.log('change to ', idx); } return ( <View> <Slider className="slider" width="750" height="500" autoPlay onChange={handleChange} > <View style={styles.itemWrap}> <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png'}} /> </View> <View style={styles.itemWrap}> <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png'}} /> </View> <View style={styles.itemWrap}> <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png'}} /> </View> </Slider> </View> ); } render(<App />, document.body, { driver: Driver });