一、需求demo示例
二、html部分代码,css自己书写
<div class="tableul">
<div class="tableli"
v-for="(item, index) in allMenuList"
:key="index"
:class="{tableliActive:tabNum==item.id}"
@click="signTable(item.id)"
>
{{item.name}}
</div>
</div> //表头tab代码
<div id="scrollBox" class="scrollBoxContent">
<div v-for="(val, index) in allMenuList" :key="val.id" class="scrollItem">
<p class="itemTitle">{{ val.name }}</p>
<ul class="itemList">
<li v-for="item in val.children" :key="item.id" class="itemListLi">
<img :src="item.url" v-if="item.url">
<div v-html="item.content" v-if="item.content"></div>
</li>
</ul>
</div>
</div> //tab内容代码
三、js逻辑部分
<script>
new Vue({
el: '#app',
data: function () {
return {
tabNum:"1",
allMenuList:[
{
id:"1",
name:"注意事项",
children:[
{
content:'<div>的回复框上反馈是否打开手铐分类算法楼上的分类</br>算法来上课局势发生了附件数据发送旅客健身房的考虑发生了附件里是</div><img src="http://file.cdn.openpubu.com/20200219/60a7e8aaa555019c3b9ac9b432c54791.jpg"/>',
}
]
},
{
id:"2",
name:"医保流程",
children:[
{
url:"http://file.cdn.openpubu.com/20191021/ada057d54daea9ee0dc006c56e6af355.png",
}
]
},
{
id:"3",
name:"常规流程",
children:[
{
url:"http://file.cdn.openpubu.com/20191021/653b113dfae9d8896589316260c63c8e.png",
}
]
},
{
id:"4",
name:"零花钱操作流程",
children:[
{
url:"http://file.cdn.openpubu.com/20200219/60a7e8aaa555019c3b9ac9b432c54791.jpg",
}
]
}
]
}
},
mounted:function(){
// 获取滚动dom元素
var _this = this
var scrollItems = document.getElementsByClassName('scrollItem')
var screenHeight = window.screen.height
var flag = false
window.addEventListener('scroll',function (e) {
var e = e || window.event
var scrollHeight = $(window).scrollTop();
for (var i = scrollItems.length-1 ; i >= 0; i--) {
var differHeight = scrollItems[i].offsetTop - scrollItems[0].offsetTop;
// 判断滚动条滚动距离是否大于当前滚动项可滚动距离
var differFlag = scrollHeight >= differHeight
if (differFlag) {
_this.tabNum = i+1;
break;
}
}
var finallyPicHeight = scrollItems[scrollItems.length-1].offsetHeight
if(finallyPicHeight < screenHeight && !flag){
var parentBox=document.getElementById("scrollBox");
var newBoxHeight = screenHeight-finallyPicHeight-scrollItems[0].offsetTop
var newBox=document.createElement("div");
newBox.style.background = '#ffffff';
newBox.style.height = newBoxHeight+'px';
newBox.innerHTML=""
parentBox.appendChild(newBox);
flag = true;
return;
}
})
},
methods: {
signTable:function(value) {
var scrollItems = document.getElementsByClassName("scrollItem");
for (var i = 0; i < scrollItems.length; i++) {
if (value == i+1) {
$('html,body').animate({scrollTop:scrollItems[i].offsetTop-scrollItems[0].offsetTop},666);
}
}
},
}
})
</script>