vue前端写了个页面,在输入框输入搜索条件,然后把搜索出来的结果放在ul中,可是有一个问题,就是一直往下选择结果,到满一屏后,下一屏的结果不能显示在ul中,换言之,就是我的滚动条在上下键操作的时候不起作用,只有在拉动的时候才起作用。
想要达到的效果是:向下翻动到最后一条的时候,再往下翻,可以滚动到下一屏;向上翻动到第一条的时候,在网上翻,可以滚动到上一屏
ul及ul样式代码如下:
<ul class="list-group" ref="box">
<!-- <div style="height:200px;overflow:hidden" v-show="show1">
<a-empty style="margin-top:33px"></a-empty>
</div>-->
<div>
<div class="message" v-show="show1">暂无数据</div>
<li
class="list-group-item list-group-item-text"
v-for="(item,index) in arr"
:key="index"
:class="{'bgc':index==listIndex || index==0&&listIndex==-1}"
@click="click($event,index)"
v-show="show2"
@mouseover="mouseOver($event)"
@mouseleave="mouseLeave($event)"
>{{item.daName +' '+item.fullTableName+' '+item.columnNameCn}}</li>
</div>
</ul>
.list-group-item.list-group-item-text {
padding: 5px 12px 5px 12px;
list-style: none;
line-height: 1.5;
text-align: left;
border-radius: 4px;
cursor: default;
/* clear: both; */
}
.list-group {
overflow-y: scroll;
max-height: 600px;
width: 94%;
padding: 0;
margin-top: 3px;
list-style: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
border-radius: 3px;
cursor: auto;
position: absolute;
z-index: 1;
background-color: #fff;
}
自己百度了很久,没有找到方法怎么去操作这个滚动条,然后问了一下前端大佬,大佬教我首先获取到ul这个元素,然后使用scrollTop去计算(百度了一下,是通过控制scrollTop的值来实现自动滚动的效果的)
实现代码如下:
myScrollTop(type) {
var myScrollHeight = document.getElementsByClassName('list-group')[0];
//使用listIndex 记录数组的index
if (!this.listIndex == 0 && this.listIndex % 18 == 0) {
var n = this.listIndex / 18;
// this.$nextTick(() => {
if (type == 0) {
//向下事件
myScrollHeight.scrollTop = 37 * 15 * n;//这里的数据是根据条数和一条数据的高来计算的
console.log(myScrollHeight.scrollTop);
} else {
myScrollHeight.scrollTop -= 37 * 15;
console.log(myScrollHeight.scrollTop);
}
// });
}
},