滚动加载更多

 var winHei = $(window).height(); //页面可视区域高度
    var lock=true;
    $(window).scroll(function() {
        var bodyHei = $('body').height(); //页面总高度
        var scrollTop = $(window).scrollTop(); //滚动条距离顶部长度
        var bi = (bodyHei-winHei-scrollTop);
        var box='<div class="loading">加载中....</div>'
        if(bi==0 && lock){
            $('.main').append(box)
            lock=false
            $.getJSON('ku.js',function (data) {
                var a="<div class='box'>"+data[0].name+"</div>"
                $('.loading').remove()
                $('.main').append(a)
                lock=true;
            })

        }

});

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在element的el-select组件中实现滚动加载更多,可以使用以下步骤: 1. 将el-select的popper-class属性设置为一个自定义类名,以便样式定制。 2. 在自定义类名的样式中,将popper的max-height设置为一个较小的值,以便在下拉列表中只显示部分选项。 3. 使用Vue的scroll事件监听器来检测下拉列表的滚动位置,并在滚动到底部时触发加载更多数据的函数。 4. 在触发加载更多数据的函数中,将新数据添加到原来的选项列表中,并更新下拉列表的高度以显示所有选项。 以下是一个简单的示例代码: HTML模板: ```html <el-select v-model="selected" popper-class="my-popper" @visible-change="handleVisibleChange"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> ``` JavaScript代码: ```js export default { data() { return { selected: '', options: [], loading: false, page: 1, perPage: 10, } }, methods: { handleVisibleChange(visible) { if (visible && this.options.length === 0) { this.loadData() } }, loadData() { this.loading = true // 模拟异步加载数据 setTimeout(() => { const newOptions = [] for (let i = 0; i < this.perPage; i++) { const value = (this.page - 1) * this.perPage + i newOptions.push({ label: `Option ${value}`, value, }) } this.options = [...this.options, ...newOptions] this.page++ this.loading = false }, 1000) }, handleScroll(event) { const target = event.target const distance = target.scrollHeight - target.scrollTop - target.clientHeight if (distance < 10 && !this.loading) { this.loadData() } }, }, mounted() { this.$nextTick(() => { const popper = this.$refs.select.$refs.popper popper.addEventListener('scroll', this.handleScroll) }) }, beforeDestroy() { const popper = this.$refs.select.$refs.popper popper.removeEventListener('scroll', this.handleScroll) }, } ``` 在上面的代码中,handleVisibleChange方法用于在下拉列表显示时自动加载第一页数据,loadData方法用于异步加载更多数据,handleScroll方法用于监听下拉列表的滚动事件并在需要时触发加载更多数据的操作。在mounted钩子函数中,我们使用$refs获取下拉列表的popper元素,并添加scroll事件监听器。在beforeDestroy钩子函数中,我们移除scroll事件监听器以避免内存泄漏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值