VueJs制作轮播组件

1.创建子组件，slider.vue

2.引入需要轮播的页面中，

html:  用:slides=""来引用不同的数据，从而可以反复使用slider.vue组件

<div class="slider-show">  <slider :slides="slides"></slider></div>
script:(slides一致)
data () {      return {        invTime:2000,        slides:[          {            src:require('../../../assets/image/banner/banner01.jpg'),            title:'标题1'          },          {            src:require('../../../assets/image/banner/banner02.jpg'),            title:'标题2'          },          {            src:require('../../../assets/image/banner/banner03.jpg'),            title:'标题3'          }        ]      }    },

3.子组件slider.vue里：props引用

export default{      props:{          slides:{              type:Array,              default:[]          }      },      data(){            return{            }      },      mounted(){          console.log('slide show.....')          console.log(this.slides)      }  }

打印输出可以看到从父组件传来的数据。

4.子组件slider.vue:事先定好结构样式：

<div class="slide-img">      <a href="xxx">        <img :src="slides[0].src" alt="" width="100%">      </a>    </div>

这样可以看到图片已经在页面中渲染出第一张，如果slides[1],就渲染第二张，显然，里面放入变动的参数。符合我们后期要求

5.slider.vue    script

   data(){            return{                nowIndex:0            }      },
slider.vue    html

 <div class="slide-img">      <a href="xxx">        <img :src="slides[nowIndex].src" alt="" width="100%">      </a>    </div>    <!--title-->    <h3>{{slides[nowIndex].title}}</h3>    <!--index-->    <ul class="slide-pages">      <li><</li>      <li v-for="(items,index) in slides"> <!--页码显示-->        <a>{{index+1}}</a>      </li>      <li>></li>    </ul>  </div>



6，设定页码跳动：改变nowIndex，实现，传入实时变动参数index（事先上面循环时声明好index）

  methods:{          goto(index){              this.nowIndex = index          }      },

html：为每个元素添加方法goto方法，传入参数index

<!--index-->    <ul class="slide-pages">      <li><</li>      <li v-for="(items,index) in slides" @click="goto(index)">        <a>{{index+1}}</a>      </li>      <li>></li>    </ul>
，ok验证成功。下一步准备：实现页码向前后翻页效果


7.前翻页后翻页：

还是用goto方法，传入不同参数，参数通过computed来做

computed:{          prevIndex(){              if(this.nowIndex == 0)              {                  return this.slides.length-1              }              else {                  return this.nowIndex - 1              }          },        nextIndex(){              if(this.nowIndex == this.slides.length-1)              {                  return 0;              }else {                  return this.nowIndex + 1              }        }      },      methods:{          goto(index){              this.nowIndex = index          }               },

Html：结构里：

<ul class="slide-pages">      <li @click="goto(prevIndex)"><</li>      <li v-for="(items,index) in slides" @click="goto(index)">        <a :class="{on:index==nowIndex}">{{index+1}}</a>      </li>      <li @click="goto(nextIndex)">></li>    </ul>

另：a绑定样式：通过index参数是否与nowIndex相等来绑定

这样基本的轮播组件完成了。