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

本文实例为大家分享了weex slider实现滑动底部导航功能的具体代码，供大家参考，具体内容如下

先看效果图

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

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

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

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

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

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

<template>
 <div :style="{height:`${totalheight}px`}">
 <slider style="flex:1;" @change="onchange" :index="page">
 <div class="frame" v-for="img in imageList">
 <image class="image" resize="cover" :src="/UploadFiles/2021-04-02/img.src">

因为常常会遇到有同学问这块的东西，所以就索性写一个，给大家参考使用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。