VueJs制作轮播组件

最新推荐文章于 2025-06-25 11:11:50 发布

原创最新推荐文章于 2025-06-25 11:11:50 发布 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

Vue.js 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了如何在Vue.js中创建一个轮播组件。首先，详细讲述了如何创建名为slider.vue的子组件，并讨论了其核心功能。接着，说明如何在父组件中引入该轮播组件，通过设置`:slides`属性绑定不同的数据，实现组件的复用，达到动态展示轮播内容的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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