Slider 组件用于在一个页面中展示多个图片,在前端这种效果被称为轮播图。默认的轮播间隔为3秒。
支持任意类型的 Weex 组件作为其子组件。你也可以放置一个 indicator
组件用于显示轮播指示器。indicator
也只能作为 Slider
的子组件使用。indicator
不能再包含其它子组件了。
onscroll
事件触发的频率,默认值为10,表示两次 onscroll
事件之间滚动容器至少滚动了10px。将该值设置为较小的数值会提高滚动事件采样的精度,但同时也会降低页面的性能。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>