Element下拉框实现滚动加载更多功能实现

JavaScript021

Element下拉框实现滚动加载更多功能实现,第1张

需求：下拉框默认显示20条数据，可使用远程搜索为显示的数据，但是部分用户喜欢滚动选择。

如图所示，el-select官方事件并没有监听滚动的事件，所以我们可以采用vue的directives自定义指令实现。

首选在src也就是main.js的同级目录下新建一个directives.js文件

在main.js中引入并注册

index.vue 在下拉框中加入v-loadmore=“加载事件名”即可实现

注意：其他细节自行注意，例如加载到底或者下拉框有联动等。

一：去掉全部的滚动条

第一个方法：

iframe

有一个scrolling属性，它有

auto

,

yes

,

no

这三个值。

scrolling

:

auto

-----在需要的时候滚动条出现

scrolling

:

yes

------始终显示滚动条

scrolling

:

no

-------始终隐藏滚动条

当设置

scrolling

:

no

时，全部的滚动条就没有了。

第二个方法：我发现除了

scrolling

可以去掉全部的滚动条外，还有另一个方法，在嵌入的页面里设置

body{overflow：hidden}，这样也可以将滚动条去掉，而且这也是当我们只想去掉某一个滚动条所使用的属性。

二：去掉右边的滚动条且保留底下的滚动条

如果只想保留底下的滚动条，那么可以在嵌入的页面里设置

body{overflow-x：auto

overflow-y：hidden；}

思路：当滚动条到达底部时，调用js方法去加载数据

代码如下：

<div style="height:1600pxborder:1px solid red">设高度模拟滚动</div>

//引入js

<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script type="text/javascript">

$(function () {

   $(window).scroll(function () {

      //浏览器所能看到的页面的那部分的高度

      var winH = $(window).height()

      var scrH = $(window).scrollTop()//滚动的高度

      //获取整个页面的高度 htmH为设置的滚动到的高度位置

      var htmH = $(document).height() - 100

           //可见高度+滚动高度 超出 设置的高度，触发方法

      if (winH + scrH >= htmH) {

//到达底部-100的高度，触发方法

alert(1)

      }

   })

})

</script>