简介

slider 组件用于在一个页面中展示多个图片，在前端这种效果被称为轮播图。默认的轮播间隔为3秒。

组件演示

screenshot.png

axml

  1. <div class="warpper">
  2.   <x-nav-bar showArrow="{{true}}" title="Slider"></x-nav-bar>
  3.   <div class="container">
  4.     <div class="buttons">
  5.       <div class="button" onTap="autoPlay">点击切换autoPlay</div>
  6.       <div class="button" onTap="interval">点击切换interval</div>
  7.       <div class="button" onTap="showIndicators">点击切换showIndicators</div>
  8.       <div class="button" onTap="infinite">点击切换infinite</div>
  9.       <div class="button" onTap="scrollable">点击切换scrollable</div>
  10.       <div class="button" onTap="keepIndex">点击切换keepIndex</div>
  11.       <div class="button" onTap="addList">点击添加数据</div>
  12.       <div class="button" onTap="changeIndex">点击改变index</div>
  13.     </div>
  14.     <div class="tip">
  15.       <div>属性信息：</div>
  16.       <div class="tip-content">
  17.         <div class="flex">autoPlay（是否自动开始播放）:<text class="text">{{autoPlay}}</text></div>
  18.         <div class="flex">interval（轮播间隔，默认为 3000ms）: <text class="text">{{interval}}ms</text></div>
  19.         <div class="flex">index（显示slider的第几个页面）: <text class="text">{{index}}</text></div>
  20.         <div class="flex">showIndicators（是否显示指示器）: <text class="text">{{showIndicators}}</text></div>
  21.         <div class="flex">infinite（是否可以无限轮播）: <text class="text">{{infinite}}</text></div>
  22.         <div class="flex">scrollable（是否可以通过滑动手势来切换页面）: <text class="text">{{scrollable}}</text></div>
  23.       </div>
  24.       <div class="flex">keepIndex（轮播器中的数据发生变化后是否保持变化前的页面序号）: <text class="text">{{keepIndex}}</text></div>
  25.       <div class="flex">onScroll 参数信息: <text class="text">{{scrollInfo}}</text></div>
  26.       <div class="flex">onChange 参数信息: <text class="text">{{changeInfo}}</text></div>
  27.     </div>
  28.     <slider
  29.       a:if="{{slider}}"
  30.       class="slider"
  31.       onChange="onChange"
  32.       onScroll="onScroll"
  33.       autoPlay="{{autoPlay}}"
  34.       interval="{{interval}}"
  35.       showIndicators="{{showIndicators}}"
  36.       index="{{index}}"
  37.     >
  38.       <div 
  39.         class="item" 
  40.         style="background-color: {{item.bg}};color: {{item.color}}" 
  41.         a:for="{{list}}" 
  42.         a:for-item="item"
  43.         a:for-index="index"
  44.       >
  45.         第{{index}}张
  46.       </div>
  47.     </slider>
  48.   </div>
  49. </div>

css

.warpper {
  background-color:#fff;
  width:100%;
  height:100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container{
  flex: 1;
  color: #999;
  line-height: 30rpx;
  font-size: 16rpx;
}
.flex{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.buttons{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 10rpx;
}
.button{
  margin-bottom: 10rpx;
  margin-right: 20rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  border-radius: 8rpx;
  background-color: #ccc;
}
.tip{
  background-color: #25b864;
  color: #fff;
  padding: 20rpx;
  margin: 10rpx;
}
.tip-content{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.tip-content div{
  width: 50%;
}

.text{
  color: #f73131;
}

.slider{
  width: 80vw;
  height: 150rpx;
  margin-left: 10vw;
  border: 1rpx solid red;
}
.item{
  width: 100%;
  height: 100%;
}

ts

import { JSON, JSONObject } from "waft-json";
import { console, getDataSource, Page, Props, Event, MessageEvent, setTimeout,window } from "waft";

let _this: Index;
export class Index extends Page {
  constructor(props: Props){
    super(props);
    _this = this;
    // 设置默认的state
    this.setState(getDataSource());

    _this.addEventListener('onScroll', (event) => {
      console.log('===============onScroll====================================')
      console.log('onScroll'+ event.toString())
      const newState = new JSONObject;
      newState.set('scrollInfo', event.toString())
      _this.setState(newState)
    })

    _this.addEventListener('onChange', (event: Event) => {
      const detail = event.toJSONObject().getObject('detail')
      const index = detail.getInteger('index');
      const newState = new JSONObject;
      newState.set('changeInfo', 'detail:' + detail.toString())
      newState.set('index', index)
      _this.setState(newState)
    })

    _this.addEventListener('changeIndex', (event: Event) => {
      const index = _this.state.getInteger('index')
      const list = _this.state.getArray('list')
      const newState = new JSONObject;
      newState.set('index', (index + 1) % list.length)
      _this.setState(newState)
    })

    _this.addEventListener('autoPlay', () => {
      const autoPlay = _this.state.getBool('autoPlay');
      const newState = new JSONObject;
      newState.set('autoPlay', !autoPlay)
      _this.setState(newState)
    })

    _this.addEventListener('interval', () => {
      const interval = _this.state.getInteger('interval');
      const newState = new JSONObject;
      newState.set('interval', interval + 1000)
      _this.setState(newState)
    })
    _this.addEventListener('showIndicators', () => {
      const showIndicators = _this.state.getBool('showIndicators');
      const newState = new JSONObject;
      newState.set('showIndicators', !showIndicators)
      _this.setState(newState)
    })
    _this.addEventListener('infinite', () => {
      const _state = new JSONObject;
      _state.set('slider', false)
      _state.set('changeInfo', '')
      _this.setState(_state)

      setTimeout(() => {
        const infinite = _this.state.getBool('infinite');
        const newState = new JSONObject;
        newState.set('infinite', !infinite)
        newState.set('slider', true)
        _this.setState(newState)
      }, 10)
    })
    _this.addEventListener('scrollable', () => {
      const _state = new JSONObject;
      _state.set('slider', false)
      _state.set('changeInfo', '')
      _this.setState(_state)

      setTimeout(() => {
        const scrollable = _this.state.getBool('scrollable');
        const newState = new JSONObject;
        newState.set('scrollable', !scrollable)
        newState.set('slider', true)
        _this.setState(newState)
      }, 10)
    })

    _this.addEventListener('keepIndex', () => {
      const keepIndex = _this.state.getBool('keepIndex');
      const newState = new JSONObject;
      newState.set('keepIndex', !keepIndex)
      _this.setState(newState)
    })

    _this.addEventListener('addList', () => {
      const list = _this.state.getArray('list');
      const newState = new JSONObject;

      const item = new JSONObject;
      item.set('bg', '#333')
      item.set('color', '#fff')
      list.push(item)

      newState.set('list', list)
      _this.setState(newState)
    })
  }
}

json

{
  "usingComponents": {
    "x-nav-bar": "waft-ui/assembly/nav-bar/nav-bar"
  },
  "state":{
    "slider": true,
    "scrollInfo": "",
    "changeInfo": "",
    "index": 2,
    "autoPlay": true,
    "interval": 3000,
    "showIndicators": true,
    "infinite": true,
    "scrollable": true,
    "keepIndex": true,
    "list": [
      {
        "bg": "red",
        "color": "#fff"
      },
      {
        "bg": "green",
        "color": "#fff"
      },
      {
        "bg": "blue",
        "color": "#fff"
      }
    ]
  }
}

属性

|

属性名

|

说明

|

类型

默认值
autoPlay 组件渲染完成时，是否自动开始播放 boolean false
interval 轮播间隔 number 3000ms
index 设置显示slider的第几个页面 number
showIndicators 是否显示指示器（尽管show-indicator的默认值是true，本属性只有在slider下包含时才有意义） boolean true
infinite 设置是否可以无限轮播 boolean true
scrollable 设置是否可以通过滑动手势来切换页面 boolean true
keepIndex 设置轮播器中的数据发生变化后是否保持变化前的页面序号 boolean true

事件

|

事件

|

说明

| | —- | —- | | onChange | 当轮播索引改变时，触发该事件。该事件给前端的参数中含有index表示当前切换到的序号。 | | onScroll | 列表发生滚动时将会触发该事件。在参数中有offsetXRatio，它表示当前图片偏移的比率，取值范围是 [-1, 1]。负值表示当前图片向左滑，正值表示向右划。比如 -0.2 表示当前图片向左滑，并且有 20% 的区域超出了容器边缘。 |