精华内容
下载资源
问答
  • "未" : "已" }} 时间 : {{item.createTime}} 加载中... 没有了 data () { return { status: null, loading: false page: 0, sumNum: 0, warnList:[] } }) mounted () { this.getAlarmResponsibleEntIdsMethods() ...
    <template>
    <div class='CardRight'>
        <div class='enterpriseInfo' v-loading="loading">
            <ul  class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
                <li v-for="item in warnList" :key="item.createTime" >
                    <p>{{item.stationName}}</p>
                    <p>
                        <span>名称 : {{item.equipName}} </span>
                        <span>{{item.status === 0 ? "未" : "已"  }}</span>
                    </p>
                    <p>时间 : {{item.createTime}}</p>
                </li>
                <p class="loadingMore" v-if="loadingMore">加载中...</p>
                <p class="noMore" v-if="!noMore">没有了</p>
            </ul>
        </div>
    </div>
    </template>
    
    
    data () {
        return {
            status: null,
            loading: false
            page: 0,
            sumNum: 0,
            warnList:[]
        }
    })
    
     mounted () {
          this.getAlarmResponsibleEntIdsMethods()
          this.getAlarmStatisticMethods()
          this.cardRightMounted()
          this.load()
      },
    methods() {
        load () {
              console.log('load');        
            this.loadingMore = true
            this.page += 1
            this.getAlarmListMethods()
              
          },
          getAlarmListMethods() {
              let obj = {
                  page: this.page,
                  row: 10,
                  entId: this.entId,
                  status: this.status,
              }
              this.loading = true
              getAlarmList(obj).then(res => {
                  this.loadingMore = false
                  if(res.code === 0 && res.data){
                    this.sumNum = res.data.sumNum
                    if(res.data.data){
                        if(this.warnList.length >=10){
                            this.warnList.push(...res.data.data)
                        }else {
                            this.warnList = res.data.data
                        }
                    }
                  }
                  this.loading = false
              }).catch(error => {
                  this.loading = false
                  this.$message.error(error)
              })
          },
    }
       computed: {
          noMore () {
              console.log(this.warnList.length);
              console.log(this.sumNum);
              
            return this.warnList.length >= this.sumNum
          },
          disabled () {
            return this.loadingMore || this.noMore
          }
      },
    
    
    
    

            

     

    注意点: 有的时候下来不能触发.加载中/load事件,根据我的错误,是高度太高了,调整一下高度就可以了

    展开全文
  • Vue 实现下拉加载更多

    千次阅读 2020-12-01 14:26:26
    熟悉Element-UI的开发者可能都会有这样的经历,它的无限滚动 InfiniteScroll 并不好用,下面介绍两种下拉加载的实现方法: 1. 使用el-table-infinite-scroll 插件 (1). 安装插件 npm install --save el-table-...

    熟悉Element-UI的开发者可能都会有这样的经历,它的无限滚动 InfiniteScroll 并不好用,下面介绍两种下拉加载的实现方法:

    1. 使用el-table-infinite-scroll 插件

    (1). 安装插件

    npm install --save el-table-infinite-scroll

    (2). 全局引入并注册

    // main.js
    
    import elTableInfiniteScroll from 'el-table-infinite-scroll';
    
    Vue.use(elTableInfiniteScroll);

    (3). 局部文件引入

    <script>
    // 引入
    import elTableInfiniteScroll from 'el-table-infinite-scroll';
    export default {
      // 注册指令
      directives: {
        'el-table-infinite-scroll': elTableInfiniteScroll
      }
    }
    </script>

    (4). 使用指令

    <el-table :height="tableHeight" v-el-table-infinite-scroll="loadMore">
    
    </el-table>

    (5). 代码实例

    <template>
        <div class="app-container">
            <el-table :height="tableHeight" v-el-table-infinite-scroll="loadMore" :data="tableList">
                <!-- 表格数据省略 -->
            </el-table>
        </div>
    </template>
    
    <script>
    // 引入插件
    import elTableInfiniteScroll from "el-table-infinite-scroll";
    
    export default {
        name: "index",
        data() {
            return {
                // 表格高度
                tableHeight:"",
                // 数据总数
                tableCount:0,
                // 表格数据列表
                tableList:[],
                // 是否加载中
                tableLoading:false,
                // 表格搜索条件
                tableSearch:{
                    page:1
                }
            }
        },
        // 注册指令
        directives: {
            "el-table-infinite-scroll": elTableInfiniteScroll,
        },
    
        created() {
            let windowHeight =document.documentElement.clientHeight || document.body.clientHeight;
            // 动态计算表格的高度,200为屏幕内除了表格以外其他元素的高度,依实际情况而定
            this.tableHeight = windowHeight - 200 + "px";
        },
        mounted(){
            this.getTableData(this.tableSearch);
        },
    
        methods: {
            // 请求表格数据
            getTableData(search) {
                let page = search.page;
                let url = "index?page=" + page;
                // 首次打开页面要加载一次数据,为了防止数据过多自动触发滚动,此处需要置为加载中
                this.tableLoading = true;
                this.$http.get(url).then((result) => {
                    if (res.code == 10000) {
                        // 拼接数据
                        this.tableList = this.tableList.concat(result.data.list);
                        this.tableCount = result.count;
                        this.tableSearch.page = result.current;
                        this.tableLoading = false;
                    }
                });
            },
            // 加载更多
            loadMore() {
                if (!this.tableLoading) {
                    this.tableLoading = true;
                    if (this.tableList.length < this.tableCount) {
                        this.tableSearch.page++;
                        this.getTableData(this.tableSearch);
                    } else {
                        this.$message("已加载完所有的数据!");
                        this.tableLoading = false;
                    }
                }
            },
        }
    };
    </script>
    
    

     

    2. 自定义下拉加载方法。

    上面使用的插件需要依赖Element-UI,如果没有使用Element-UI,那就只能自己写一个下拉加载了,实现代码如下:

    <template>
        <div class="app-container">
            <div :style="{height:tableHeight,overflow:'auto'}" id="tableBox">
                <!-- 表格数据省略 -->
            </div>
        </div>
    </template>
    
    <script>
    export default {
        name: "index",
        data() {
            return {
                // 表格高度
                tableHeight:"",
                // 数据总数
                tableCount:0,
                // 表格数据列表
                tableList:[],
                // 是否加载中
                tableLoading:false,
                // 表格搜索条件
                tableSearch:{
                    page:1
                }
            };
        },
        created(){
            let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            // 动态计算表格的高度,200为屏幕内除了表格以外其他元素的高度,依实际情况而定
            this.tableHeight = windowHeight - 200 +'px';
        },
        mounted() {
            this.getTableData(this.tableSearch);
            document.getElementById("tableBox").addEventListener('scroll',this.onTableScroll); 
        },
    
        beforeDestroy() {
            // 移除监听事件
            window.removeEventListener('scroll', this.onTableScroll)
        },
    
        methods: {
            onTableScroll(){
                var obj = document.getElementById("tableBox");
                var scrollHeight = obj.scrollHeight;
                var scrollTop = obj.scrollTop; 
                var objHeight = obj.offsetHeight;  
                // 100为阈值,可根据实际情况调整    
                if(scrollHeight <= (scrollTop + objHeight + 100) && !this.tableLoading && this.tableList.length<this.tableCount){ 
                    this.tableLoading = true;
                    this.tableSearch.page++;
                    setTimeout(()=>{   
                        this.getTableData(this.tableSearch);
                    },300)
                }
            },
    
            getTableData(search){
                let page = search.page;
                let url = "index?page=" + page;
                // 首次打开页面要加载一次数据,为了防止数据过多自动触发滚动,此处需要置为加载中
                this.tableLoading = true;
                this.$http.get(url).then((result) => {
                    if (res.code == 10000) {
                        // 拼接数据
                        this.tableList = this.tableList.concat(result.data.list);
                        this.tableCount = result.count;
                        this.tableSearch.page = result.current;
                        this.tableLoading = false;
                    }
                });
            },
            
         
        },
    };
    </script>
    
    

     

    展开全文
  • 熟悉Element-UI的开发者可能都会有这样的经历,它的无限滚动 InfiniteScroll 并不好用,下面介绍两种下拉加载的实现方法:1. 使用el-table-infinite-scroll 插件(1). 安装插件npm install --save el-table-infinite-...

    熟悉Element-UI的开发者可能都会有这样的经历,它的无限滚动 InfiniteScroll 并不好用,下面介绍两种下拉加载的实现方法:

    1. 使用el-table-infinite-scroll 插件

    (1). 安装插件

    npm install --save el-table-infinite-scroll

    (2). 全局引入并注册

    // main.js

    import elTableInfiniteScroll from 'el-table-infinite-scroll';

    Vue.use(elTableInfiniteScroll);

    (3). 局部文件引入

    // 引入

    import elTableInfiniteScroll from 'el-table-infinite-scroll';

    export default {

    // 注册指令

    directives: {

    'el-table-infinite-scroll': elTableInfiniteScroll

    }

    }

    (4). 使用指令

    (5). 代码实例

    // 引入插件

    import elTableInfiniteScroll from "el-table-infinite-scroll";

    export default {

    name: "index",

    data() {

    return {

    // 表格高度

    tableHeight:"",

    // 数据总数

    tableCount:0,

    // 表格数据列表

    tableList:[],

    // 是否加载中

    tableLoading:false,

    // 表格搜索条件

    tableSearch:{

    page:1

    }

    }

    },

    // 注册指令

    directives: {

    "el-table-infinite-scroll": elTableInfiniteScroll,

    },

    created() {

    let windowHeight =document.documentElement.clientHeight || document.body.clientHeight;

    // 动态计算表格的高度,200为屏幕内除了表格以外其他元素的高度,依实际情况而定

    this.tableHeight = windowHeight - 200 + "px";

    },

    mounted(){

    this.getTableData(this.tableSearch);

    },

    methods: {

    // 请求表格数据

    getTableData(search) {

    let page = search.page;

    let url = "index?page=" + page;

    // 首次打开页面要加载一次数据,为了防止数据过多自动触发滚动,此处需要置为加载中

    this.tableLoading = true;

    this.$http.get(url).then((result) => {

    if (res.code == 10000) {

    // 拼接数据

    this.tableList = this.tableList.concat(result.data.list);

    this.tableCount = result.count;

    this.tableSearch.page = result.current;

    this.tableLoading = false;

    }

    });

    },

    // 加载更多

    loadMore() {

    if (!this.tableLoading) {

    this.tableLoading = true;

    if (this.tableList.length < this.tableCount) {

    this.tableSearch.page++;

    this.getTableData(this.tableSearch);

    } else {

    this.$message("已加载完所有的数据!");

    this.tableLoading = false;

    }

    }

    },

    }

    };

    2. 自定义下拉加载方法

    上面使用的插件需要依赖Element-UI,如果没有使用Element-UI,那就只能自己写一个下拉加载了,实现代码如下:

    export default {

    name: "index",

    data() {

    return {

    // 表格高度

    tableHeight:"",

    // 数据总数

    tableCount:0,

    // 表格数据列表

    tableList:[],

    // 是否加载中

    tableLoading:false,

    // 表格搜索条件

    tableSearch:{

    page:1

    }

    };

    },

    created(){

    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

    // 动态计算表格的高度,200为屏幕内除了表格以外其他元素的高度,依实际情况而定

    this.tableHeight = windowHeight - 200 +'px';

    },

    mounted() {

    this.getTableData(this.tableSearch);

    document.getElementById("tableBox").addEventListener('scroll',this.onTableScroll);

    },

    beforeDestroy() {

    // 移除监听事件

    window.removeEventListener('scroll', this.onTableScroll)

    },

    methods: {

    onTableScroll(){

    var obj = document.getElementById("tableBox");

    var scrollHeight = obj.scrollHeight;

    var scrollTop = obj.scrollTop;

    var objHeight = obj.offsetHeight;

    // 100为阈值,可根据实际情况调整

    if(scrollHeight <= (scrollTop + objHeight + 100) && !this.tableLoading && this.tableList.length

    this.tableLoading = true;

    this.tableSearch.page++;

    setTimeout(()=>{

    this.getTableData(this.tableSearch);

    },300)

    }

    },

    getTableData(search){

    let page = search.page;

    let url = "index?page=" + page;

    // 首次打开页面要加载一次数据,为了防止数据过多自动触发滚动,此处需要置为加载中

    this.tableLoading = true;

    this.$http.get(url).then((result) => {

    if (res.code == 10000) {

    // 拼接数据

    this.tableList = this.tableList.concat(result.data.list);

    this.tableCount = result.count;

    this.tableSearch.page = result.current;

    this.tableLoading = false;

    }

    });

    },

    },

    };

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • Vue实现下拉加载更多

    2021-06-19 23:27:47
    Home组件代码示例如下: <div class="home"> <one-type-nav></one-type-nav> <banner></banner> <good-list :list="goodsData"></good-list> ...&l

    Home组件代码示例如下:

      <div class="home">
        <one-type-nav></one-type-nav>
        <banner></banner>
         <good-list :list="goodsData"></good-list>
         <div class="loading">{{loadingMsg}}</div>
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import oneTypeNav from '@/components/OneTypeNav.vue'
    import banner from '@/components/Banner.vue'
    import goodList from '@/components/GoodList.vue'
    
    import {getShopList} from "../tools/ajax.js"
    export default {
      name: 'Home',
      data() {
        return {
          page:0,
          isLoading:false ,//
          loadingMsg:"正在加载中...",
          goodsData:[]
        }
      },
      components: {
       oneTypeNav,
       banner,
       goodList
      },
      created() {
        // 初始化请求数据
        this.getGoodsData()
        this.bindScroll()
    },
    destroyed() {
      this.clearScroll()
    },
      methods: {
        // 绑定scroll事件
          bindScroll(){
            window.addEventListener("scroll",this.scrollHandle)
          },
        
        // 清除scroll事件
        clearScroll(){
          window.removeEventListener("scroll",this.scrollHandle)
        },
        // 滚动的回调函数
        scrollHandle(){
            // scroll和input 滑动等事件都是高频率的触发事件,所以在写这些的事件的
            // 回调尽量加上防抖和节流
            if(this.isLoading) return // 正在加载的时候,如果在滚动着时候不请求新数据
    
            var B = document.documentElement.scrollHeight // html元素的内容的高度
            var H  = window.innerHeight  // 获取窗口的高度
            var S = document.body.scrollTop||document.documentElement.scrollTop //滚出去的高度
            if(B-H-S<50){
              //  快触底 请求新数据
              this.getGoodsData()
            }
        },
    
        // 请求商品数据
         getGoodsData(){
            this.page++ // 先把页面加1
            this.isLoading = true //正在加载中
            getShopList({page:this.page}).then(data=>{
              this.isLoading = false//本次请求结束
              if(data.length>0){ // 如果数据存在
                this.goodsData.push(...data) //把本次数据放进数组里面
    
              }else{
                this.loadingMsg = "我是有底线的!!!"
              }
            })
         }
      },
    }
    </script>
    
    <style lang="scss" scoped> 
      .loading{
        margin-top: 10px;
        color: purple;
        padding: 3px;
      }
    </style>
    

    GoodList.nue组件代码如下:

         <div class="goods-box">
             <router-link :to="`/detail?gId=${good.Id}`" v-for="(good,i) in list" :key="i" > //拼接字符串'"/detail?gId="+good.Id'
                <img v-lazy="good.imageUrl" alt="">
                <h4 class="title">{{good.title}}</h4>
                <p>
                    <span class="price">¥{{good.priceStr}}</span>
                    <span class="mack" v-html="good.mack"></span>
                </p>
             </router-link>   
         </div>
    </template>
    
    <script>
    export default {
        props:["list"]
    }
    </script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
    <style scoped>
        .goods-box{
            width: 1100px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            
        }
        .goods-box::after{
            content: "";
            flex:1;
        }
        a{
            width: 200px;
            height: 220px;
            border: 1px solid lightgray;
            box-sizing: border-box;
            margin-top: 20px;
            margin-left: 20px ;
            text-decoration: none;
    
        }
        img{
            width: 160px;
            height: 160px;
        }
        .price{
            text-align: left;
            float: left;
            position: relative;
            top: 10px;
            color: red;
        }
        .mack{
            float: right;
            position: relative;
            top: 10px;
        }
        .title{
            text-align: left;
            color: black;
            font-size: 15px;
            position: relative;
            left: 5px;
        }
        .mack>>>span{
            padding: 5px;
        }
    </style>
    
    展开全文
  • VUE下拉刷新上拉加载更多(mt-loadmore) <div style="height:100vh;overflow: scroll;"> <mt-loadmore :bottomMethod="loadBottom" :bottom-all-loaded="allLoaded" :bottomDistance="1...
  • vue框架的下拉加载更多

    千次阅读 2019-04-25 11:05:10
    vue的下加载更多有麻烦,不过也是写写沾沾 源码: HTML js page:自己定显示多少条,我这边因为某些原因显示的多了点,一般只显示10条 基本就是这样!!! ...
  • 效果: github:https://github.com/flying0917/vue-app-new/tree/master/src/components/cui-vue/cui-pullrefresh
  • vue下拉刷新上拉加载组件 Vue-Pull-To (Vue-Pull-To) A pull-down refresh and pull-up load more and infinite scroll component for Vue.js. 下拉刷新和上载为Vue.js加载更多无限滚动组件。 View demo 查看...
  • 假设你的项目已经可以正常运行 ...(安装插件有时需要翻墙,为了避免...(2) 安装插件 cnpm install --save vue-infinite-loading (3) 在需要的页面中引入vue-infinite-loading : <template> <div class="cont
  • vue 下拉加载

    2018-01-19 15:56:20
    vue-infinite-loading2.0 中文文档
  • vue 下拉加载分页

    2020-08-18 16:37:52
    = 0) { //加载更多操作 this.next="加载中" end = 0; this.pageNum++ //执行函数 setTimeout(function () { end = 1; }, 1000) } }, } //页面关闭时关闭函数 destroyed() { var that = this; window....
  • 下拉加载更多完整代码 <template> <div id="page1"> <!-- <h1>Random User</h1> --> <div class="person" v-for="(person, index) in person" :key="index"> <div class=...
  • // 在上一个数组中拼接一个新数组(类似下拉刷新,加载更多) _this.userInfo = _this.userInfo.concat(res.data); } }) } } catch (error) { } }, }, created() { var _this = this; var header = $api....
  • <template> <div> <ul class="box"> <li v-for="item in dataList"> {{item}} </li> </ul> <... 加载中... </p>--> </div> </temp
  • scrollView.vue <template> <div class="pageScroll" ref="pageScroll" @scroll="scroll($event)"> <div class="scrollBox" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @...
  • vue下拉自动刷新 上拉加载更多

    千次阅读 2018-07-04 16:15:28
    组件:vue-scrollergit:https://github.com/wangdahoo/vue-scrollerdemo:https://wangdahoo.github.io/vue-scroller/#/customSpinner下载链接:...
  • VUE 实现下拉分页加载更多功能~ html <div class="con_item" v-for="item in pageArr"> <div class="name" >{{item.name}}</div> </div> <div class="loading" style="display: ...
  • 下拉加载更多数据 ant-design-vue 提供了 popupScroll 事件,下拉列表滚动时的回调。 handlePopScroll (e)) { const { scrollHeight, scrollTop, clientHeight } = e.target if (scrollHeight - scrollTop === ...
  • 用于下拉加载更多 import Vue from 'vue'; Vue.directive("scroll", { inserted: function(el, bind, vnode) { let scrollHeight = el.offsetHeight, cb_name = bind.expression, // 绑定的函数名 cb = vnode....
  • vue下拉加载插件 之vue-infinite-loading

    千次阅读 2017-11-30 16:32:13
    假设你的项目已经可以正常运行 ...  (安装插件有时需要翻墙,为了避免这种情况我直接安装了淘宝镜像 )  (2) 安装插件 cnpm install --save vue-infinite-loading ...(3) 在需要的页面中引入vue-in
  • vue 滚动加载更多

    千次阅读 2018-12-26 15:40:35
    vue 滚动加载更多 通过对滚动条高度 浏览器高度 和文档高度的对比来判断执行请求数据接口 &lt;template&gt; &lt;section class="outer_container"&gt; &lt;section class="...
  • import { DirectiveOptions } from "vue"; /** * 对 element-ui 的无限滚动在 el-table 上使用的封装 */ import elInfiniteScroll from "element-ui/lib/infinite-scroll"; const elScope = "ElInfiniteScroll";...
  • 使用自定义指令loadmore,实现下拉加载更多。 首先是loadmore.js, el 为绑定的元素,通过el.scrollHeight - el.offsetHeight === el.scrollTop判断滚动条到达底部,这里引入了loadsash实现节流,以免每一次滚动到...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,025
精华内容 1,610
关键字:

vue下拉加载更多

vue 订阅