Matlab中slider怎么用,vue组件开发之slider组件使用详解

本文实例为大家分享了vue组件开发之slider组件的具体使用代码，供大家参考，具体内容如下

代码如下：

{{item.title}}

<

>

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 () {

}

}

*{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;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。