欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

VueJs制作轮播组件

程序员文章站 2024-01-13 22:09:10
...

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相等来绑定

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