vue 封装 自定义的无限下拉组件

<!--自定义的无限下拉组件-->
<template>
  <div :class="domClass" ref="myScroll" @scroll="load">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "infiniteScroll",
    props: ['loading', 'domClass', 'distance', 'immediateCheck'],
    components: {},
    data() {
      return {}
    },
    mounted() {
      const myScroll = this.$refs.myScroll;
      //为填满 填充加载
      console.debug('为填满 填充加载----', myScroll.clientHeight, myScroll.scrollHeight)
      if ((this.immediateCheck == undefined ? true : this.immediateCheck) && (myScroll.clientHeight <= myScroll.scrollHeight)) {
        this.$emit('loadMore',true);
      }
      // myScroll.addEventListener('scroll', ()=> {
      //     const distance =this.distance || 0
      //     if(!this.loading){
      //         if((myScroll.scrollTop + myScroll.clientHeight) == (myScroll.scrollHeight-distance)) {
      //             this.$emit('loadMore');
      //         }
      //     }
      // });
    },
    methods: {
      load() {
        const myScroll = this.$refs.myScroll;
        const distance = this.distance || 0;
        if (!this.loading) {
          if ((myScroll.scrollTop + myScroll.clientHeight) == (myScroll.scrollHeight - distance)) {
            this.$emit('loadMore');
          }
        }
      }

    }
  }
</script>

<style lang="less" scoped>

</style>

<template>
    <div>
         <scroll :domClass="'list'" @loadMore="loadMore1" :loading="busy">
             <div class="goods" v-for="(item,index) in goodslist" :key="index">
             </div>
        </scroll>    
        <!--  <scroll :domClass="'list'" @loadMore="loadMore1" :loading="busy">
        <div class="goods" v-for="(item,index) in goodslist" :key="index">
          <div class="info">
            <img class="goods-img" :src="imgUrl+item.goods_img[0]"/>
            <div class="text">
              <div class="name">{{item.goods_name}} <span class="intro"></span></div>
              <div class="intro">{{item.f_title}}</div>
              <div class="price">￥{{item.ruling_price | showPrice}}</div>
            </div>
          </div>
          <div class="pay-bottom" @click="toGoods(item.id)">立即购买</div>
        </div> -->
      <!-- </scroll> -->
        <!-- <el-container>
        <el-header>
            <Heads></Heads>
        </el-header>
        <el-container style="height: 700px;">
            <el-aside width="250px">
                <Navigation_bar  :setOption="cc" ></Navigation_bar>
            </el-aside>
            <el-main>
                <button @click="getParamter">获取router参数</button>
                <new_order v-if="option=='aa'" v-bind:optiondata="option"></new_order>
                <pending_payment v-if="option=='bb'" v-bind:optiondata="option"></pending_payment>
            </el-main>
        </el-container>
        </el-container> -->
    </div>
</template>
<script >
import Vue from 'vue'
import { mapState,mapGetters,mapMutations } from 'vuex'
import Heads from './Head-s.vue'
import new_order from './core/new-order.vue'
import pending_payment from './core/pending-payment.vue'
import Navigation_bar from './Navigation-bar.vue'
import Scroll from './infiniteScroll'
export default {
    name: 'Demo',
      data () {
          return {
              option:"新订单",
              busy: false,
              goodslist:[
                  {
                      id:1,
                      name:"新订单",
                      children:[
                          {id:"1-1",name:"新订单"},
                          {id:"1-2",name:"待付款"},
                          {id:"1-3",name:"待收货"},
                          {id:"1-4",name:"待评价"},
                          {id:"1-5",name:"全部订单"},
                      ]
                      },
                  {
                    id:2,
                      name:"系统管理",
                       children:[
                          {id:"2-1",name:"门市信息"},
                          {id:"2-2",name:"收货地址"},
                          {id:"2-3",name:"意见反馈"},
                          {id:"2-4",name:"操作员管理"},
                          {id:"2-5",name:"编号管理"},
                      ]
                },  
              ]
          }
      },
      components: {Heads,Navigation_bar,new_order,pending_payment, Scroll},
      methods:{
          ...mapMutations([
                'increment','decrement'
                ]),
        handleCommand(command) {
             this.$message({
                message: '登录成功',
                type: 'success'
                });
            if(command=='switch_account'){
                this.$message({
                    message:'切换账号',
                    type:'success',
                });
                sessionStorage.removeItem("user");
                this.$router.push({ path: '/login' });
            }else{
                if (confirm("您确定要退出吗？")){
                    this.$message({
                        message:"退出成功",
                        type:'success'
                    });
                    sessionStorage.removeItem("user");
                    window.opener=null;
                    window.open('','_self');
                    window.open("about:blank","_self").close();   
                    return false;
                }
            }
        },
        getParamter(){
            // alert(this.$route.params.id);
            alert(this.$route.params.id)
            // alert(this.$route.query.id)
        },
        cc(flag){
            this.option=flag
            console.info(this.option);
        },
         loadMore1(){
          console.info("我下拉了");
            this.page += 1;
            // this.loadMore();
            console.info(this.page);
        },
      },
      computed:{
         ...mapState({
             count: state => state.count,
      })

      }
  }
</script>
  
<style>
    .el-header {
    background-color: #333;
    text-align: left;
    min-width: 1300px;
    padding-top: 15px;
  }
  
  .el-aside {
    background-color: #EEEEEE;
    color: #333;
    text-align: center;
    /* line-height: 200px; */
  }
  
  .el-main {
    background-color: #FFF;
    color: #333;
    /* text-align: center; */
    /* line-height: 160px; */
    min-width: 1000px;
     padding: 0px;
   /* padding-top: 0px;
    padding-right: 20px; */
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
      .list {
          width: calc(100% - 2rem);
          /*position: absolute;*/
          /*right: 0.5rem;*/
          margin-left: 2rem;
          /*padding-top: 0.3rem;*/
          height: 6.4rem;
          overflow: scroll;
      }
</style>