viewpager - 如何控制weex的Slider显示第几页。
本文介绍了viewpager - 如何控制weex的Slider显示第几页。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我使用 weex
的 slider
模块来实现类似 Android 的 ViewPager
滑动功能,这的确是可行的.但是这里我需要加一个导航栏,点击后切换到指定页面就不知道如何去做了。
silder 只在 onchange
方法中的 event
对象属性中有一个 index
值可以获取当前图片的索引,没有提到通过代码切换 slider
页面的方法。
我也查了一下相关问题,在weex怎么实现界面左右滑动切换问题中曾经提到过该问题,但是只是说了有一个 index
值,改变 index
值可以实现页面切换。但是没提到具体做法~
那么……又遇到过类似问题的童鞋吗?求指教~非常感谢~~
解决方案
问题已解决,刚才看了下android端的SDK源码~发现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>
这篇关于viewpager - 如何控制weex的Slider显示第几页。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文