分页组件vue和jsp版本

vue文章/教程1年前 (2023)发布勤奋小助

0 0

vue版本

<template>
  <div class="com-vscroll">
      <slot name="mcontent"></slot>
      <div class="loadcss">
          <img src="https://sta.caotangteach.com/static/com.mianfeinovel/images/common/mianfeinovel_loading.gif" class="loadimg" v-if="loading&&isFullLoad==1">
          <div v-if="isFullLoad==1">正在加载更多...</div>
          <div v-if="isFullLoad==0">没有更多数据了</div>
      </div>
  </div>
</template>
<script>
  export default {
    name: "ComVscroll",
    props: {
      isFullLoad: {
        type: Number,
        default: 0
      },
      watchCount: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        loading: true,
      };
    },
    methods: {
      fetchData() {
          if (this.loading) {
              return;
          }
          if (this.loading==false) {
              this.loading = true;
              this.$emit("onPullingUp");
          }
      },
      scrollEventFunc() {
        //当打开一个页面，一定会执行这里
        var a = document.documentElement.clientHeight || document.body.clientHeight;
        var b = document.documentElement.scrollTop || document.body.scrollTop;
        var c = document.documentElement.scrollHeight || document.body.scrollHeight;
        if (a + b + 300 >= c) {
            this.fetchData();
        }
      }
    },
    watch: {
      watchCount(value) {
        //根据上一页的结果，唯一能再次发接口的条件
        this.loading = false;
      }
    },
    mounted() {
      if (window.addEventListener) {
        window.addEventListener("scroll", this.scrollEventFunc, false);
      } else if (window.attachEvent) {
        window.attachEvent("scroll", this.scrollEventFunc);
      }
    }
  };
</script>

<style lang="stylus" scoped>
.com-vscroll {
  .loadcss {
    display: -webkit-box;
    -webkit-box-pack: center;
    height: 82px;
    line-height: 82px;
    font-size: 0.32rem;
    color: #5D646E;
    .loadimg {
      margin-right: 10px;
      margin-top :2px;
      height: 0.32rem;
      width: 0.32rem;
    }
  }
}
</style>

页面引用的时候：

      <ComVscroll @onPullingUp="ClickPullup" :isFullLoad="hasMoreload"  :watchCount="watchCount">
        <div slot="mcontent">
          <div class="page-mid">
            <div class="mid-content">
              <ComVlist :remenOptions="remenOptions" :hasMidBtn="identity<4" :dlist="Array.from(pageDatas[mtype])" :dadianParams="dadianParams"></ComVlist>
            </div>
          </div>
        </div>
      </ComVscroll>

第一次接口由页面的created或者路由监听执行。以后的分页才由scroll执行。

jsp版如下：

loadMore();   //主动执行第一次
    function scrollEventFunc() {
        var a = document.documentElement.clientHeight || document.body.clientHeight;
        var b = document.documentElement.scrollTop || document.body.scrollTop;
        var c = document.documentElement.scrollHeight || document.body.scrollHeight;
        if (a + b + 300 >= c) {
            try {
                
                loadMore();
                
            } catch (e) {

            }
        }
    }
    if (window.addEventListener) {
        window.addEventListener("scroll", scrollEventFunc, false);
    } else if (window.attachEvent) {
        window.attachEvent("scroll", scrollEventFunc);
    }
    var pageNum = 0; //页码
    var pageSize = 10; //每页加载条数
    var lastPage = false; //最后一页
    var loading = false; //正在加载
    var rankIndex=0;
    function loadMore(){
        if (lastPage) { //已经是最后一页了，不再请求
            return;
        }
        if (loading) { //正在加载
            return;
        }
        loading = true;
        pageNum++;
        $('.nothing').hide();
        $('.loading').show();
        if (sextype==1) {
            var fenpin="man";
        }else{
            var fenpin="woman";
        }
        var url = window.J_search.buildAjaxUrl("/aa/aa/aa/list/"+pageSize+"/"+pageNum+"?sex="+fenpin);
        $.ajax({
            type: 'GET',
            url: url,
            async: false,
            timeout: 10000,
            success: function (returnData) {
                if (returnData.respCode == "20000") {
                    var dataList=returnData.data;
                    if (dataList == null || dataList.length == 0) {
                        lastPage = true;
                        loading = false; //加载结束
                        $(".nothing").show();
                        $('.template-207').hide();
                        return;
                    }
                    var cnxhStr='';
                    if(dataList&&dataList.length>0) {
                        $.each(dataList, function (i, n) {
                            rankIndex++;
                            var seriaType=(n.serialStatus == 'SERIALIZE')?"连载中":"已完结";
                            //判断二级分类是否为空
                            var label = n.label;
                            if(label == null || label == ''){
                                label = '其他';
                            }
                            cnxhStr += '<div class="topPart book_top_1 rank' + i + ' getRank" onclick=\'click_Event("' + n.host + '","' + n.bookId + '","' + n.id + '","' + n.bookName + '","' + n.authorName + '","","","0","猜你喜欢","' + (rankIndex) + '")\'><div class="imgBox" ><img src="https://st.quanbennovel.com/static/images/default.png" data-src="'%20+%20n.sourceImageUrl%20+%20'"></div>';
                            cnxhStr += '<div class="des"><p class="name">' + n.bookName + ' </p><p class="details"> ' + n.description + '</p><div class="arAndpeo clearfix"><span class="author"> ' + n.authorName + '</span><span class="desLabel"><i class="firstLabel"> ' + label + ' </i></span></div></div></div>';
                        });
                        if (sextype==1) {
                            $("#man .cnxh").append(cnxhStr);
                        }
                        if (sextype==2) {
                            $("#woman .cnxh").append(cnxhStr);
                        }
                        try {
                            $(document).trigger('ajax:finish', pageNum - 1); //处理图片加载失败
                        } catch (err) {

                        }

                        loading = false; //加载结束
                        lazyload("container"); //图片懒加载
                    }

                }else {
                    loading = false; //加载结束
                    return;
                }
            },
            error: function (xhr, type, textStatus) {
                loading = false;
            }
        });
    }