vue组件开发之slider组件（代码实例）
程序员文章站
2022-04-19 19:16:24
vue组件开发之slider组件（代码实例）
代码如下：
vue组件开发之slider组件（代码实例）
代码如下：
<template>
<p class="slider">
<p class="wrapbox">
<p class="item" v-for="(item, index) in items" style="">{{item.title}}</p>
</p>
<p class="status">
<span v-for="(item, index) in items" v-bind:class="index == count ? 'active' : '' "></span>
</p>
<p class="prev-btn btn" @click="prev()"><</p>
<p class="next-btn btn" @click="next()">></p>
</p>
</template>
<script>
export default {
name: 'slider',
data (){
return {
count: 0,
items:[{
name:"1",
id:1,
title:"我是图1的内容"
},{
name:"2",
id:2,
title:"我是图2的内容"
},{
name:"3",
id:3,
title:"我是图3的内容"
},{
name:"4",
id:4,
title:"我是图4的内容"
}]
}
},
components: { },
methods: {
prev () {
console.log(this.count);
if(this.count > 0){
this.count--;
document.querySelector(".wrapbox").style.webkitTransform = "translateX(-" + (this.count * 400) + "px)";
}else{
this.count = 0;
}
},
next () {
console.log(this.count);
if(this.count < 3){
this.count++;
document.querySelector(".wrapbox").style.webkitTransform = "translateX(-" + (this.count * 400) + "px)";
}else{
this.count = 3;
}
}
},
created () {
}
}
</script>
<style scoped>
*{margin:0 auto;padding:0;font-family:"微软雅黑";}
.slider{
position:relative;
height:200px;
width:400px;
margin:50px auto;
overflow:hidden;
}
.slider .wrapbox{
width:1600px;
height:200px;
transition:all 1.5s;
}
.slider .status{
position:absolute;
top:170px;
height:20px;
width:400px;
text-align:center;
}
.slider .status span{
display:inline-block;
height:20px;
width:20px;
margin:0 10px;
background:#eee;
border-radius:10px;
}
.slider .status span.active{
background:#352929;
}
.slider .wrapbox .item{
float:left;
height:200px;
width:400px;
line-height:200px;
text-align:Center;
color:#fff;
font-size:25px;
background:red;
}
.slider .wrapbox .item:nth-of-type(2){
background:blue;
}
.slider .wrapbox .item:nth-of-type(3){
background:yellow;
}
.slider .wrapbox .item:nth-of-type(4){
background:green;
}
.slider .btn{
position:absolute;
top:50%;
height:40px;
width:20px;
line-height:40px;
color:#fff;
text-align:center;
background:rgba(10, 10, 10, .85);
transform:translateY(-50%);
cursor:pointer;
}
.slider .next-btn{
right:0;
}
</style> 上一篇： 烤箱怎么烤红薯？给大家介绍相关知识点