vue组件开发之slider组件。

关注

原创 2023-04-18 10:07:16 4.2k 阅读 AI 写同款· GEO 优化 ›

【Unity3D-UGUI系列】（十）Slider 滑动条组件详解一、前言首先，介绍一个UGUI，NGUI是UGUI的前身，Unity开发团队将NGUI的开发团队收到自己开发团队下，并且由此开发了UGUI。 UGUI系统是从Unity 4.6版本后才开始集成到Unity编辑器中。 UGUI的特点：灵活快速可视化对于开发者来说有很多的优点，比如说：效率高实现效果好易于使用和拓展与Unity编辑器的兼容性高这是本系列文章的第一篇：二、Slider 滑动条组件介绍 Slider是一个滑动条组件，一般用来制作血条或者进度条。 Slider和Scrol 阅读详情

这里写图片描述

代码如下：

<template>
    <div class="slider">
        <div class="wrapbox">
            <div class="item" v-for="(item, index) in items" style="">{{item.title}}</div>
        </div>
        <div class="status">
            <span v-for="(item, index) in items" v-bind:class="index == count ? 'active' : '' "></span>
        </div>
        <div class="prev-btn btn" @click="prev()"><</div>
        <div class="next-btn btn" @click="next()">></div>
    </div>
</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>