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相等来绑定
这样基本的轮播组件完成了。
上一篇: js实现表格分页
下一篇: vs Code 快速生成代码