如何控制weex的Slider显示第几页。

Question

我使用 weex 的 slider 模块来实现类似 Android 的 ViewPager 滑动功能，这的确是可行的.但是这里我需要加一个导航栏，点击后切换到指定页面就不知道如何去做了。silder 只在 onchange 方法中的 event 对象属性中有一个 index 值可以获取当前图片的索引，没有提到通过代码切换slider 页面的方法。我也查了一下相关问题，在weex怎么实现界面左右滑动切换问题中曾经提到过该问题，但是只是说了有一个 index 值，改变index 值可以实现页面切换。但是没提到具体做法~那么……又遇到过类似问题的童鞋吗？求指教~非常感谢~~

Answer 1

官网demo就有slider table

Answer 2

slider文档中有3个特性没写出来。

• showIndicators 控制轮播图指示器显示与否。传入 false 或者 空字符串 则不显示轮播图指示器。

• value 获取value值，如果为数字，切换 slider 到指定页。

• index 切换 slider 到指定页(value 和 index 功能差不多。)。

注意：这里的三个参数设置默认值没用，都需要 v-bind 绑定，然后改变绑定的值才会变。

具体可以看下SDK源码，源码地址在playground项目中有~（找了好久 - -|）

代码：

<template>

  <div>

    <slider class="slider" interval="3000" :value="val" :index="index" :showIndicators="show">

      <div class="frame" v-for="img in imageList" :key="img.src">

        <image class="image" resize="cover" :src="img.src"></image>

      </div>

      <indicator class="indicator"></indicator>

    </slider>

    <text class="btn" @click="val = 0">toPage0</text>

    <text class="btn" @click="val = 1">toPage1</text>

    <text class="btn" @click="val = 2">toPage2</text>

    <text class="btn" @click="show = 'false'">showIndicators</text>

  </div>

</template>