找回密码
当前位置：前端开发者 > Vue.js > 正文

前端Vue案例_特效

2018-11-27 22:36:32 分类：Vue.js 阅读(171) 评论(0)
前端开发和app开发工具
前端语言移动开发工具
前端团队开发工具

前端写特效的时候必须要保证DOM是加载完毕的，之前我用组件生命周期的update写，多有不便，
现发现自定义指令比较好，指令里面也是有周期，能做到相对的分离；

html 代码

<!DOCTYPE html>
    <head>
        <title></title>
        <meta charset=”utf-8″ />
        <script src=”https://unpkg.com/vue/dist/vue.js”></script>
        <script src=”https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js”></script>
        <style type=”text/css”>
            * {
                padding: 0;
                margin: 0;
            }
            ul,
            li {
                list-style: none;
            }
            .sliderCon {
                width: 800px;
                height: 400px;
                margin: 50px auto;
                overflow: hidden;
                font-family: ‘微软雅黑’;
                position: relative;
            }
            .sliderCon ul {
                position: absolute;
                left: 0;
                top: 0;
            }
            .sliderCon ul li {
                width: 800px;
                height: 100%;
                line-height: 400px;
                text-align: center;
                font-size: 50px;
                color: #fff;
                float: left;
                /*font-weight: 700*/
            }
            .sliderCon ul li:nth-child(odd) {
                background: green;
            }
            .sliderCon ul li:nth-child(even) {
                background: pink;
            }
        </style>
    </head>
    <body>
        <div id=”app”>
            <div v-slider=”lists” class=”sliderCon”>
                <ul>
                    <li v-for=”(item,index) in lists”>{{ item.name }}</li>
                </ul>
            </div>
        </div>
        <script type=”text/javascript”>
            var vm = new Vue({
                el: ‘#app’,
                data: {
                    lists: [
                        { name: ‘第一条’ },
                        { name: ‘第二条’ },
                        { name: ‘第三条’ },
                        { name: ‘第四条’ },
                    ],
                },
                directives: {
                    slider: {
                        bind: function(el, obj) {},
                        update: function(el) {
                            console.log(‘更新’)
                        },
                        componentUpdate: function() {
                            console.log(‘组件更新’)
                        },
                        inserted: function(el, obj) {
                            // obj.value[0].name=”4555656″;
                            var ul = $(el).find(‘ul’)
                            var li = ul.find(‘li’)
                            ul.css(‘width’, li.length * $(el).width())
                            var index = 0
                            setInterval(function() {
                                index >= li.length – 1 ? (index = 0) : index++
                                ul.animate(
                                    { left: ‘-‘ + index * li.width() + ‘px’ },
                                    300,
                                )
                            }, 1000)
                        },
                    },
                },
            })
        </script>
    </body>
</html>
linux上的前端开发工具
2014年度最佳web前端开发工具和框架
前端开发工具 记事本
.net 前端开发工具
» 本文来自：前端开发者 » 《前端Vue案例_特效》
» 本文链接地址：https://www.rokub.com/6812.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论