用vue.js写的一个简单轮播

前端入坑纪 47

时隔三月有余，眼看便是要过年的节奏。这段时间除了应付公司的一个大项目，还顺带把vue.js 给学习和实践了一番。踩过坑，也挖过坑。今天就先来个非正统的vue轮播，以表慰藉！

好，详解如下！

用vue.js写的一个简单轮播

OK，first things first！ github项目地址

HTML 结构

    <div class="mainWrp" id="app">
        <div class="carousel">
            <ul class="imgsWrp clear">
                <li v-for="item in imgsArray">
                    <img :src="'https://jkerush.github.io/jane_prj/jianshu/wrap/img/'+item" alt="">
                </li>
            </ul>
            <p><span>1</span>/{{imgsLens}}</p>
        </div>
    </div>

:src 为 v-bind:src的指令简写，作用是绑定数据到html标签的属性上，比如这里的img标签
{{imgsLens}}双花括号是将vue数据（图片有几张就是几）直接填入到网页中。
v-for="item in imgsArray" 这里的v-for是循环指令，将依次把imgsArray里的数据填入到 ul 的 li 中。

CSS 结构

       body,
        p,
        ul {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none
        }
        
        .mainWrp {
            width: 100%;
            max-width: 640px;
            overflow: hidden;
            margin: 0 auto
        }
        
        .clear::after {
            content: "";
            display: block;
            clear: both
        }
        
        .carousel {
            position: relative;
        }
        
        .carousel p {
            position: absolute;
            bottom: 3px;
            right: 0;
            padding: 1px 5px;
            text-align: center;
            font-size: 12px;
            color: #333;
            background-color: rgba(255, 255, 255, .6)
        }
        
        .carousel span {
            color: #666
        }
        
        .imgsWrp {
            transition: all 700ms cubic-bezier(0.215, 0.610, 0.355, 1)
        }
        
        .imgsWrp li {
            float: left
        }
        
        .imgsWrp img {
            width: 100%
        }

这里的样式和我以前写的轮播都差不多，没啥特殊

JavaScript 结构

        var vm = new Vue({
            el: "#app",// 瞧，这里注明vue起作用的地方是div#app内
            data: {
                // 这里放的都是vm对象的数据，通过vm.xx得到
                imgsArray: ['miao01.jpg', 'miao02.jpg', 'miao03.jpg', 'miao04.jpg', 'miao05.jpg', 'miao06.jpg'],
                imgsLens: 0
            },
            mounted: function() {
                // 这里是vue在名为mounted的生命周期时，执行对应的函数
                this.imgsLens = this.imgsArray.length // this指向自己也就是vm，这里把图片数组的长度赋给了vm.imgsLens，自然它就从0变成了6
            }
        })

        //  接着就是当页面onload后执行轮播的函数了
        window.onload = function() {
            var imgsWrp = document.querySelector(".imgsWrp"),
                imgsLi = imgsWrp.querySelectorAll("li"),
                markSpan = document.querySelector(".carousel span"),
                i = 0;

            // 这里根据图片数量分别算出li的宽度和ul的宽度
            imgsWrp.style.width = vm.imgsLens * 100 + "%";
            var widthLi = 100 / vm.imgsLens + "%";
            for (var ils = 0; ils < vm.imgsLens; ils++) {
                imgsLi[ils].style.width = widthLi;
            }
            // 定时函数，每3秒变更i，同时变换ul要transform的值
            setInterval(function() {
                i < vm.imgsLens - 1 ? i++ : i = 0;
                imgsWrp.style.transform = "translateX(-" + 100 / vm.imgsLens * i + "%)";
                markSpan.textContent = i + 1
            }, 3000)
        }

虽然这是一个简单轮播，但是通过vue再写一遍后就能发现用vue来纯粹渲染输出，js做特效，相较起完全由js来做轮播是要省事很多的！当然，vue的内容还远远不止于此，之后我也会陆续更新自己的所见所得！

好了，到此，本文告一段落！感谢您的阅读！祝您和您的家人身体健康，阖家幸福！