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目录)
这是第{{page+1}}页
上述是爱站技术频道小编为大家带来的weex slider实现滑动底部导航功能,大家在使用的时候,如果还有疑问,可以咨询js.aizhan.com。