weex slider实现滑动底部导航功能

来源:爱站网时间:2020-08-21编辑:网友分享
滑块对web版本的影响不正常,当新图像滑入时,旧图像直接消失,没有滑出效果,那么weex slider实现滑动底部导航功能,大家都清楚吗?别着急,爱站技术频道小编今天就带你一起来感受一下。

滑块对web版本的影响不正常,当新图像滑入时,旧图像直接消失,没有滑出效果,那么weex slider实现滑动底部导航功能,大家都清楚吗?别着急,爱站技术频道小编今天就带你一起来感受一下。

先看效果图

这里主要是使用了weex 的 slider 实现了可以滑动的底部导航框架

这里最主要的几个方法,如果光是看weex的官方文档,可能很痛苦,因为有一些功能虽然代码里已经写好,但是他并没有写出来,希望官方的文档能够尽快的完善起来

实现这样的功能,首先是一个slider的用法,这个官方文档是用这个来给大家做轮播图的。

首先我们不能设置自动播放ok了(直接不复制就ok了)
第二我们需要能够捕获到滚动到哪一页的索引,这个值需要用来设置下面的当前tab(监听slider的change 方法)
第三我们需要通过外部js去设置slider的当前页面,譬如我们点击第二个tab,我们需要把显示的index 设置为1(index是从0开始的)官方文档目前并没有给出这块的解释

那么下面我们通过源码挖掘,我们知道slider其实可以有一个属性 :index
这个就是当前的索引了,那么我们需要设置这个索引,只要去改变这个对应得index 的值就可以了

那么这里就上代码了(文中所有的图片是去assets 文件夹取得图片,并非本地图片,所以需要自己放一些图片到assets目录)

上述是爱站技术频道小编为大家带来的weex slider实现滑动底部导航功能,大家在使用的时候,如果还有疑问,可以咨询js.aizhan.com。

上一篇:IOS对数组实例代码进行排序

下一篇:tableview顶部spring图像效果的IOS实现

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载