优化滚动分页，封装组件，

licp

2024-04-24 70b128785737df0d6065b09a75cf79b49efe22fa

 src/view/notice.vue

@@ -33,7 +33,8 @@
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="notice-content" @scroll="scrollFn" v-loading="loading">
    <div class="notice-content" v-loading="loading">
      <scroll-pagination @load="refresh" :finishLoding="finishLoding">
      <div class="notice-content-item" v-for="(m,i) in list" :key="i">
        <div class="btns" v-if="m">
          <el-dropdown style="margin-right: 20px;" trigger="click" @command="e=>handleDropdown(e,m)" v-if="m.messageType==2||m.messageType==3">
@@ -71,36 +72,25 @@
          <span>new</span>
        </div>
      </div>
      <div v-if="list.length<1&&!loading&&!isLoding" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >暂无数据</div>
      <div v-if="list.length>0">
        <el-button
          v-if="isLoding"
          type="text"
          style="display: flex; margin: 0 auto; color: #909399"
          ><i class="el-icon-loading" style="font-size:20px"></i
        ></el-button>
         <el-button
          type="text"
          v-if="finishLoding"
          style="display: flex; margin: 0 auto; color: #909399"
          >已经没有更多啦~</el-button
        >
      </div>
      </scroll-pagination>
      <div v-if="list.length<1&&!loading" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >暂无数据</div>
    </div>
  </el-drawer>
</div>
</template>

<script>

import ScrollPagination from '../components/tool/scroll-paging.vue'
export default {
  components: {
    ScrollPagination
  },
  data(){
    return{
      drawer:false,
      direction:'rtl',
      options:[],
      type:'0',
      list:[],
      dropdownList0:[
        {
          label:'通过',
@@ -129,11 +119,11 @@
          value:4
        },
      ],
      list:[],
      currentPage:1,
      pageSize: 16, // 一页16条
      pageSize: 8, // 一页7条
      total: null,
      loading: false, // 组件loading的展示,默认为true
      isLoding: false, // 加载中，loading图标,默认为true
      loading: true, // 组件loading的展示,默认为true
      finishLoding: false // 加载完成，显示已经没有更多了
    }
  },
@@ -145,13 +135,11 @@
  },
  methods:{
    refresh(){
      if(this.currentPage>1){
        this.isLoding = true
      }else{
      if(this.currentPage==1){
        this.loading = true
      }
      if(this.list.length==0){
        window.addEventListener("scroll", this.throttle(this.scrollFn, 20000));
        this.finishLoding = false
      }
      let type = this.type==0?null:this.type;
      this.$axios.get(this.$api.informationNotification.page+'?size='+this.pageSize+'&current='+this.currentPage+(type?'&messageType='+type:'')).then(res => {
@@ -170,9 +158,9 @@
          if(this.total==this.list.length){
            this.finishLoding = true;
          }
          this.currentPage++
        }
        this.loading = false
        this.isLoding = false;
      })
    },
    open(){
@@ -192,6 +180,8 @@
    goNoticeDetail(row){
      this.$axios.put(this.$api.informationNotification.triggerModificationStatusToRead+'/'+row.id).then(res => {
        this.drawer = false;
        row.num = Math.random(100);
        this.$bus.$emit("change", JSON.stringify(row));
        this.$parent.addTab({
          v: "消息详情",
          i: "el-icon-s-tools",