文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
<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, Android. 设置轮播器中的数据发生变化后是否保持变化前的页面序号。
- forbid-slide-animation, boolean, v0.20+ & iOS. iOS 平台默认支持动画,使用该属性可以强制关闭切换时的动画。
样式
- 通用样式 支持所有通用样式。
事件
- 通用事件 支持所有通用事件。
- change 当轮播索引改变时,触发该事件。该事件给前端的参数中含有
index
表示当前切换到的序号。 - scroll 列表发生滚动时将会触发该事件。在参数中有
offsetXRatio
,它表示当前图片偏移的比率,取值范围是 [-1, 1]。负值表示当前图片向左滑,正值表示向右划。比如 -0.2 表示当前图片向左滑,并且有 20% 的区域超出了容器边缘。
Vue 示例
<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 示例
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 });
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论