vue的爬坑之路------vue实现菜品分类之后监听滚动事件，实现动态修改菜单栏状态

html内容

<div @scroll="scroll_fun($event)" id="app">
<div class="foots" v-if="foot_data[typeObj.type]!=null&&foot_data[typeObj.type].length!=0" :foot-type="typeObj.type" v-for="(typeObj,$index) in foot_type">
<div>
<br>
<div class="foot_type">{{typeObj.name}}</div>
</div>
<div class="foot" v-for="footObj in foot_data[typeObj.type]">{{footObj.name}}</div>
</div>
</div>

css样式

<style>
html,
body {
margin: 0;
padding: 0;
}

#app {
height: 100vh;
overflow: auto;
}

.foot {
display: inline-block;
width: 25%;
height: 100px;
}

.foot_type {
background-color: red;
}
</style>

vue.js代码

<script type="text/javascript" src="../static/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../static/vuejs/vue.js"></script>
<script type="text/javascript">
window.onload = function() {
var app = new Vue({
el: '#app',
data: {
"foot_data": {
"type1": [{
"name": "name1",
"type": "招牌"
}, {
"name": "name2",
"type": "招牌"
}],
"type2": [{
"name": "name3",
"type": "开胃菜"
}, {
"name": "name4",
"type": "开胃菜"
}, {
"name": "name5",
"type": "开胃菜"
}, {
"name": "name6",
"type": "开胃菜"
}, {
"name": "name7",
"type": "开胃菜"
}, {
"name": "name8",
"type": "开胃菜"
}, {
"name": "name4",
"type": "开胃菜"
}, {
"name": "name5",
"type": "开胃菜"
}, {
"name": "name6",
"type": "开胃菜"
}, {
"name": "name7",
"type": "开胃菜"
}, {
"name": "name8",
"type": "开胃菜"
}, {
"name": "name4",
"type": "开胃菜"
}, {
"name": "name5",
"type": "开胃菜"
}, {
"name": "name6",
"type": "开胃菜"
}, {
"name": "name7",
"type": "开胃菜"
}, {
"name": "name8",
"type": "开胃菜"
}, {
"name": "name4",
"type": "开胃菜"
}, {
"name": "name5",
"type": "开胃菜"
}, {
"name": "name6",
"type": "开胃菜"
}, {
"name": "name7",
"type": "开胃菜"
}, {
"name": "name8",
"type": "开胃菜"
}, {
"name": "name4",
"type": "开胃菜"
}, {
"name": "name5",
"type": "开胃菜"
}, {
"name": "name6",
"type": "开胃菜"
}, {
"name": "name7",
"type": "开胃菜"
}, {
"name": "name8",
"type": "开胃菜"
}, {
"name": "name4",
"type": "开胃菜"
}, {
"name": "name5",
"type": "开胃菜"
}, {
"name": "name6",
"type": "开胃菜"
}, {
"name": "name7",
"type": "开胃菜"
}, {
"name": "name8",
"type": "开胃菜"
}, {
"name": "name4",
"type": "开胃菜"
}, {
"name": "name5",
"type": "开胃菜"
}, {
"name": "name6",
"type": "开胃菜"
}, {
"name": "name7",
"type": "开胃菜"
}, {
"name": "name8",
"type": "开胃菜"
}, {
"name": "name4",
"type": "开胃菜"
}, {
"name": "name5",
"type": "开胃菜"
}, {
"name": "name6",
"type": "开胃菜"
}, {
"name": "name7",
"type": "开胃菜"
}, {
"name": "name8",
"type": "开胃菜"
}, {
"name": "name4",
"type": "开胃菜"
}, {
"name": "name5",
"type": "开胃菜"
}, {
"name": "name6",
"type": "开胃菜"
}, {
"name": "name7",
"type": "开胃菜"
}, {
"name": "name8",
"type": "开胃菜"
}, {
"name": "name4",
"type": "开胃菜"
}, {
"name": "name5",
"type": "开胃菜"
}, {
"name": "name6",
"type": "开胃菜"
}, {
"name": "name7",
"type": "开胃菜"
}, {
"name": "name8",
"type": "开胃菜"
}]
},
"foot_type": [{
"type": "type3",
"name": "1111"
}, {
"type": "type1",
"name": "招牌"
}, {
"type": "type2",
"name": "开胃菜"
}],
"foot_type_top": {},
"foot_type_bottom": {}
},
methods: {
scroll_fun: function(e) {
var scrollTop = this.$el.scrollTop;
for(var key in this.foot_type_top) {
var value = this.foot_type_top[key];
if(value < scrollTop&&scrollTop<this.foot_type_bottom[key]) {
console.log("-------------");
console.log(key);
}
}
},
init_foot_type_data: function() {
var $types = $("#app").find(".foots");
for(var i = 0; i < $types.size(); i++) {
var key = $types.eq(i).attr("foot-type");
var value = $types.eq(i).position().top;
var height=$types.eq(i).height();
this.foot_type_top[key] = value;
this.foot_type_bottom[key]=value+height;
}
console.log(this.foot_type_top);
}
},
mounted: function() {
this.init_foot_type_data();
}

});
}
</script>

methods：不调用不会执行。 mounted:在模板渲染成html后调用，通常是初始化页面完成后；

vue的生命周期

beforeCreate>created>beforeMount>mounted>beforeUpdate>updated>beforeDestroy>
destroyed

$(“div”).scrollTop(100); 获取滚动条距离顶点的位置，然后和当前div的高度进行对比