vue3+typeScript 不到100行代码的轮播组件(每周一个小组件)__Vue.js
发布于 3 年前 作者 banyungong 1914 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

每周一个小组件(祝大家2021年都有好收获)

前言

实现功能:带切换动画效果的轮播图
每周分享一个vue3+typeScript的小组件,我只想分享下自己的实现思路,楼主是个菜鸡前端,记录下实现过程,说不定对你有帮助。

效果展示

预览地址

开发过程

思路:循环要轮播的内容,用样式和v-show控制只显示一个内容,用一个active变量来接收要显示的轮播内容的索引。

html部分

<div class="carousel">
    <!-- 要轮播的内容 -->
    <div class="item" v-for="(vo,inx) in items" :key="inx" v-show='inx===active'>
        <div class="item-content">{{vo}}</div>
        <!-- 轮播控件 左右轮播 -->
        <span class="item-left" @click.stop="goLeft(inx)">←</span>
        <span class="item-right" @click.stop="goRight(inx)">→</span>
        <!-- 轮播控件 小圆点 -->
        <div class="item-control">
            <div class="item-inx" v-for="(v,i) in items.length" :key="i" :style="active===i?'background:#222;':''" @click="changeInx(i)"></div>
        </div>
    </div>
</div>

ts部分

<script lang="ts">
<script lang="ts">
import {defineComponent,reactive,toRefs} from 'vue'
export default defineComponent({
    setup() {
        const data = reactive({
            items: ['轮播1','轮播2','轮播3'],
            active: 0,
            // 左切换
            goLeft: (inx: number) => {
                data.active = inx > 0 ? (--inx) : (data.items.length - 1);
            },
            // 右切换
            goRight: (inx: number) => {
                data.active = inx < (data.items.length - 1) ? (++inx) : 0;
            },
            // 小圆点切换
            changeInx: (i: number) => {
                data.active = i
            },
        })
        return {...toRefs(data)}
    }
})
</script>

css部分

.carousel {
    width: 800px;
    background: #ecf0f3;
    height: 400px;
    overflow: hidden;
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    .item {
        animation-name: fadeIn;
        animation-duration: 1s;
        animation-fill-mode: both;
        width: 100%;
        height: 100%;
        position: relative;
        .item-content {
            color: #fff;
            background: rgba(0, 0, 0, .2);
            text-align: center;
        }
        >span {
            padding: 4px;
            color: #fff;
            background: rgba(0, 0, 0, .2);
            top: 46%;
            cursor: pointer;
            z-index: 99;
        }
        .item-left {
            position: absolute;
            left: 10px;
        }
        .item-right {
            position: absolute;
            right: 10px;
        }
        .item-control {
            position: absolute;
            bottom: 20px;
            display: flex;
            justify-content: center;
            left: 0;
            right: 0;
            .item-inx {
                cursor: pointer;
                width: 16px;
                height: 16px;
                background: rgba(0, 0, 0, .2);
                border-radius: 50%;
                margin: 0 4px;
            }
        }
    }
    .item:nth-child(2n) {
     background-color: #99a9bf;
  }
    .item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
}
vue3持续更新中...

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 谦卑沉程 原文链接:https://juejin.im/post/6913712767753158663

回到顶部