weex之slider图片和对应标题显示

weex的工作环境

图片(来自网络，供效果展示使用)

先来看一下，我们今天要实现的效果图吧〜图片轮播，下面显示对应的文字

这里用到的主要是1.组件－轮播组件用于在一个网页中展示多个图片。初始设置是3秒内在2个图片做切换。2.子组件－indicator组件只能是slider的子组件（这里就是上图显示的那个指示圆点效果）3.属性：的属性auto-play，值为true/false,表示是否自动播放4.事件：change事件－当轮播索引改变时。事件对象参数包含index属性，表示正在展示的图片的索引序号

先来看下代码：说明：1. repeat='{{list}}'-代表显示图片数据的属性名2.src='{{url}}' - 代表显示图片地址属性3.indexTitle － 代表图片对应的标题数据

接下来，我们看下，绑定的数据： module.exports = {    data: {      list:[        {url:'imgs/001.jpeg'},        {url:'imgs/002.jpeg'},        {url:'imgs/003.jpeg'}      ],      indexTitle:'',    }，/*这里显示下面的methods即事件＊/｝注意：list后的数据要用数组显示这样结果显示如下：图片轮播效果显示，只是没有对应的标题显示

最后，我们来看下，如果实现标题的显示：    methods: {      change: function(e){        var index = e.index;        var title = ['水果怎么吃才更有营养','饭菜如何搭配','虾的多种做法'];        this.indexTitle = title[index];      }    }我们知道，slider组件的change事件中，事件对象带有index属性，表示当前正在展示图片的索引号.1.我们把当前的索引号，放到变量index中2.设置对应图片的标题数据为title数组3.把title[index]放到 this.indexTitle(由于data 或 method 属性将被代理到视图模型实例中，故可以用this.indexTitle来读写数据)这个就是视图模型实例中显示的数据，如下代码所示： {{indexTitle}}即： 当前索引号确定，就显示对应索引号的title数组数据