前端Vue案例：特效
摘要： 前端开发和app开发工具 前端语言移动开发工具 前端团队开发工具 前端写特效的时候必须要保证DOM是加载完毕的，之前我用组件生命周期的update写，多有不便， 现发现自定义指令比较好，指令里面也是有……
| 前端开发和app开发工具 |
| 前端语言移动开发工具 |
| 前端团队开发工具 |
前端写特效的时候必须要保证DOM是加载完毕的，之前我用组件生命周期的update写，多有不便，
现发现自定义指令比较好，指令里面也是有周期，能做到相对的分离；
html 代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=”utf-8″ />
<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
近期评论