vue滚动分页加载以及监听事件处理

 <template>
     <div class="bodyContainer">
         <div class="allContent" id="pageTop">
             <!-- 经纪人 -->
             <div class="brokerBlock"  v-show="isBroker && !loading">
                 <broker :list="brokerInfo" v-show="Object.keys(brokerInfo).length>0" @change="protocolClick" @remove="reomoveBrokerClick"></broker>
             </div>
             <!-- 我的艺人 -->
              <div class="con artistCon" v-show="artistTotal > 0">
                 <div class="title " :class="{isFixed:!isBroker}"  id="artistTitle">
                     我的艺人<span class="gray">({{artistTotal}}位)</span>
                 </div>
                 <ul class="artistList">
                     <li class="box artistItem" v-for="item of artistInfoList" :key="item.userInfo.userId" >
                         <div class="personBlock">
                             <div class="person" @click="openUserClick(item.userInfo.userId)">
                                 <div class="showImg">
                                     <img :src="item.userInfo.userThumUrl" />
                                     <template  v-if="item.userInfo.kolFlag">
                                         <div class="icon c_kol" v-if="item.userInfo.kolFlag"></div>
                                     </template>
                                     <template  v-else>
                                         <div class="icon c_company" v-if="item.userInfo.upSignType == '1'"></div>
                                         <div class="icon c_person" v-if="item.userInfo.upSignType == '0'"></div>
                                     </template>
                                 </div>
                                 <div class="name" :class="{artistName:item.isRelease || item.status>=1}">{{item.userInfo.nickName}}</div>
                                 <div class="situation" v-if="item.isRelease">关系已解除</div>
                                 <div class="situation" v-if="item.status == 1">帐号已冻结</div>
                                 <div class="situation" v-if="item.status == 2">帐号已暂停</div>
                             </div>
                             <div class="action" v-if="item.userInfo">
                                 <em class="chatIcon"  v-if="item.userInfo.userId" @click="openChatClick(item.userInfo.userId)"></em>
                                 <em v-if="!item.isRelease" class="revisionIcon" @click="revisionClick(item)"></em>
                                 <em v-if="!item.isRelease" class="removeIcon" @click="removeArtistClick(item.userInfo.hwUserId)"></em>
                             </div>
                         </div>
                         <div  v-if="!item.isRelease" class="works">本周作品更新&nbsp;{{item.weekOpusNum}}</div>
                         <div class="divideInfo" v-if="!item.isRelease">
                             <span v-if="item.shareRate">TA的分成占比{{item.shareRate}}</span>
                             <span v-if="item.shareAmount">· 累计分取 {{regFenToYuan(item.shareAmount)}}</span>
                         </div>
                         <div class="divideInfo"  v-if="item.isRelease && item.shareAmount">
                             <span>累计分得{{regFenToYuan(item.shareAmount)}}</span>
                         </div>
                         <div v-if="item.isRelease"  class="inviteAgainBtn" :class="{active:successInvite.indexOf(item.userInfo.hwUserId) > -1  }" @click="inviteClick(item.userInfo.hwUserId)">重新邀请</div>
                         <div class="tips" v-if="item.remark">{{item.remark}}</div>
                         <div v-if="!item.isRelease" class="protocol" @click="protocolClick">合作协议</div>
                     </li>
                 </ul>
                 <!-- 上拉加载 -->
                  <div class="loadTxt"><em v-if="lock"  class="rotate"></em>{{loadTxt}}</div>
              </div>
             <!-- 全局加载 -->
             <div class="loadContainer" v-if="loading"><em  class="rotate"></em>正在加载中...</div>
             <!-- 数据为空 -->
             <empty v-if="Object.keys(brokerInfo).length < 1 && artistTotal < 1 && !loading">
                 <p class="note">你还没有经纪人和艺人哦</p>
                 <router-link class="invite" :to="inviteLink">邀请艺人</router-link>
             </empty>
         </div> 

         <router-link class="rule" :to="ruleLink">查看规则</router-link>
         <div  class="inviteBlock" v-if="Object.keys(brokerInfo).length > 0 || artistTotal > 0">
             <router-link class="inviteArtistBtn" :to="inviteLink">邀请艺人</router-link>
         </div>
         <!-- 协议弹出层 -->
         <pop-up @change="closeLayer" v-if="popuShow">
             <template v-if="protocolPopShow">
                 <h2 class="title">{{protocolTitle}}</h2>
                 <div class="content" v-html="protocolCon"></div>
                 <div class="confirmBtn" @click="closeNoClick">确认</div>
             </template>
             <template v-else-if="actionPopShow">
                 <h2 class="title">{{protocolTitle}}</h2>
                 <div class="content" v-html="protocolCon"></div>
                 <div class="confirmBtn" :class="{active:isActive}"  @click="confirmProtocol">{{btntxt}}</div>
                 <div class="popCloseCon" @click="closeActionClick"></div>
             </template>
             <template v-else-if="removePopshow">
                 <div class="content center">
                     解除关系后经纪人将不再获得艺人的收益分成，对方同意后将在下个结算账期生效
                 </div>
                 <div class="action">
                     <div class="btn confirmRemove" @click="confirmRemoveClick">确认解除</div><div class="btn noConfirmRemove" @click="closeLayer">我再想想</div>
                 </div>
             </template>
         </pop-up>
         <!-- 比例弹出层 -->
         <scale @change="closeScale" @send="sendAjaxClick" :number="scaleCount" :scaleBtn="scaleBtn"  :scaleDesc="scaleDesc"  v-show="isScale" :userId="userId"></scale>
     </div>
 </template>
 <script>
     import broker from './components/broker';
     import empty from './components/empty';
     import PopUp from './components/PopUp';
     import scale from './components/scale';
     const pageSize=6;
     let t='';
     export default {
         name: "Index",
         data() {
             return {
                 popuShow:false,   //弹窗展示
                 protocolPopShow:false,//经纪人协议
                 actionPopShow:false,//操作协议层
                 removePopshow:false,//解除确认操作层
                 isScale:false,//比例弹出层
                 ruleLink: '/rule.html',
                 inviteLink:'/search.html',
                 userId:'',
                 isActive:true,//操作协议按钮灰色显示
                 sencond:5,//秒数
                 btntxt:'',  //操作协议层按钮文字显示
                 scaleValue:'',//分成比例
                 scaleDesc:'',//比例弹窗描述
                 scaleBtn:'',
                 scaleCount:'50%',
                 personValue:'',//艺人还是经纪人
                 brokerInfo:{}, //经纪人列表
                 artistInfoList:[], //查询艺人列表
                 artistTotal:0,//查询艺人列表总数
                 isShow:false, // 是否显示滚动条
                 successInvite:[],//发送邀请成功的华为id取数
                 totalPage:1,
                 paramsValue:[],
                 searchBarFixed:'',
                 isBroker:true,
                 offsetTop:0,
                 loading: true, //一开始页面就要加载
                 pageNo:1,//当前页
                 lock : false, //当在请求数据时，滚动时锁定不能再发送分页请求
                 loadTxt:'' ,
                 protocolTitle:'',//协议标题
                 protocolCon:'' //协议内容
             };
         },
         components:{broker,empty,PopUp,scale},
         mounted: function () {
             this.protocolAjax();
             this.broker();
             this.featchData();

             window.addEventListener('scroll', this.handleScroll);
         },
         watch:{
             $route(to,from){
                 window.scrollTo(0,20);
                 if(to.name == 'index'){
                     window.addEventListener('scroll', this.handleScroll);
                 } else {
                     window.removeEventListener('scroll', this.handleScroll)
                 }
             }
         },
         methods: {
             handleScroll () {
               let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;//滚动条滚动的长度
               let _offsetHeight = document.querySelector('#pageTop').offsetHeight; //是指元素内容的高度
               let brokeHeight = document.querySelector('.brokerBlock').offsetHeight; //经纪人内容高度
               let clientHeightValue = document.documentElement.clientHeight || document.body.clientHeight;

              console.log("scrollTop",scrollTop,"_offsetHeight",_offsetHeight,"brokeHeight",brokeHeight,"clientHeightValue",clientHeightValue)
               if(scrollTop >  brokeHeight){ //滚动条滚动的距离超过经纪人的内容高度
                  this.isBroker = false;
               }else{
                   this.isBroker = true;
               }
               if(this.pageNo > 1){
                 //距离底部距离50就加载数据
                 if(_offsetHeight - clientHeightValue - scrollTop <= 50 ){
                     if (this.totalPage <= this.pageNo) {
                             setTimeout(() => {
                                 //mui.toast("已经没有更多了~");
                                 this.loadTxt='当当当~已经到底啦~';
                             }, 300)
                          return;
                     }else{
                         this.featchData();
                     }
                 }
               }
             },
            //获取数据函数
             featchData:function (){
                 //如果已经在加载数据，不可以重复加载
                 if (this.lock) return;
                 this.lock = true;
                 this.loadTxt='正在加载中...';
                 this.$request.post(_basePath + '/activity/page20191018/queryArtistList.html',{pageNo:this.pageNo,pageSize:pageSize}).then((res) => {
                     this.artistTotal = res.total;

                     this.totalPage = res.total % pageSize > 0 ? Math.floor(res.total / pageSize + 1) : res.total / pageSize;
                     let result = [];
                     res.artistInfoList.forEach((item) =>{
                         result.push(item.userInfo.hwUserId)
                     })
                     this.$request.post(_basePath + '/activity/page20191018/batchQueryUserAccount.html',{userIdList:result}).then((res2) => {
                         res2.userAccountDetailList.forEach((item,i) =>{
                             res.artistInfoList[i].status = item.status;
                         })
                         this.artistInfoList = res.artistInfoList;
                     }).catch(() => {});

                     this.artistInfoList = [...this.artistInfoList, ...res.artistInfoList];
                      ++this.pageNo;
                     this.lock = false;
                     this.loading = false;
                     this.loadTxt='';
                 }).catch(() => {
                     this.lock = false;
                     this.loading = false;
                   })
             },
             //查询经纪人列表
             broker () {
               this.$request.post(_basePath + '/activity/page20191018/queryBroker.html').then((res) => {
                   let result = [];
                   result.push(res.brokerInfo.userInfo.hwUserId)
                   this.$request.post(_basePath + '/activity/page20191018/batchQueryUserAccount.html',{userIdList:result}).then((res2) => {
                     res.brokerInfo.status = res2.userAccountDetailList[0].status;
                     this.brokerInfo = res.brokerInfo;
                 }).catch(() => {});
               }).catch(() => {})
             },
              //点击调起个人主页
             openUserClick (item) {
                 console.log(item)
                 var userId = item;
                 mui.openClient({"pageType": "userHome","userId":item});
             },
             //点击调起聊天窗口
             openChatClick (item){
                 console.log(item)
                 var userId = item;
                 mui.openClient({"pageType": "chat","userId":item});
             },
             //艺人解除关系
             removeArtistClick (id) {
               //1:艺人，0 – 不是（只是校验是否可以解约
               this.userId = id;
               this.personValue = 1;
               this.releaseRelationship (1,0);
             },
             //经纪人解除关系
             reomoveBrokerClick (id) {
                this.userId = id;
                this.personValue = 0;
                this.releaseRelationship (0,0);
             },
             //重新调整分成比例
             revisionClick (item) {
               this.isScale = true;
               this.userId = item.userInfo.hwUserId;
               this.scaleCount = item.shareRate;
               this.scaleDesc = '调整分成需对方确认，选择双方都认可的分成比例可以提高调整成功率哦~';
               this.scaleBtn = '确认调整';
             },
             //重新邀请
             inviteClick (id) {
               if(this.successInvite.indexOf(id) > -1){
                  return;
               }
               this.isScale = true;
               this.userId = id;
               this.scaleDesc = '邀请成功后你可获取该用户部分收益，选择双方都认可的分成比例可以提高邀请成功率哦~';
               this.scaleBtn = '发送邀请';
               this.scaleCount = '50%';//邀请比例统一为50%
             },
             //点击发送邀请
             sendAjaxClick (value){

                 this.scaleValue = value;
                 this.popuShow = true;
                 this.actionPopShow = true;//操作协议层展示
                 this.isScale = false;
                 this.isActive = true;
                 this.sencond = 5 ;
                 this.timer();
             },
             //5s时间倒计时
             timer () {
                 if (this.sencond > 0) {
                     if(this.scaleDesc.indexOf("调整") > -1){
                         this.btntxt="已阅读同意并确认调整("+this.sencond+"s)";
                     }else{
                         this.btntxt="已阅读同意并确认邀请("+this.sencond+"s)";
                     }
                     this.sencond--;
                     t=setTimeout(this.timer, 1000);
                 } else{
                     this.isActive = false;
                     this.sencond = 5;
                     if(this.scaleDesc.indexOf("调整") > -1){
                         this.btntxt="已阅读同意并确认调整";
                     }else{
                         this.btntxt="已阅读同意并确认邀请";
                     }

                 }
             },
             //已阅读同意并确认
             confirmProtocol () {
                 if(this.isActive){
                     return false;
                 }
                 if(this.scaleDesc.indexOf("调整") > -1){
                     //比例调整请求
                     this.revisionAjax();
                 }else{
                     //邀请请求
                     this.sendAjax();
                 }

             },
             //发送邀请请求
             sendAjax () {
                 this.$request.post(_basePath + '/activity/page20191018/inviteArtist.html',{userId: this.userId,shareRate:this.scaleValue}).then((res) => {
                     mui.toast("已发送邀请，对方接受后会通知你哦",2000);
                     this.successInvite.push(this.userId);
                     this.closeActionClick();
                 }).catch(() => {})
             },
             //调整比例请求
             revisionAjax () {
                 this.$request.post(_basePath + '/activity/page20191018/adjustShareRate.html',{userId: this.userId,shareRate:this.scaleValue}).then((res) => {
                     mui.toast("已发送调整消息，对方接受后会通知你哦",2000);
                     this.closeActionClick();
                 }).catch(() => {})
             },
             //解除关系操纵请求
             releaseRelationship (a,b) {
                 //a 0:经纪人 1艺人
                 //b 0：校验   1：可以解约请求
                 this.$request.post(_basePath + '/activity/page20191018/releaseRelationship.html',{userId: this.userId,role:a,realRelease:b}).then((res) => {
                    // mui.toast("已发送解除消息，对方接受后会通知你哦",2000);
                     if(res.releaseStatus == '0'){ //不能解约
                         mui.toast(res.remark,2000)
                     }else if(res.releaseStatus == 1){ //可解约
                         this.popuShow = true;
                         this.actionPopShow = false;
                         this.protocolPopShow = false;
                         this.removePopshow = true;
                     }else if(res.releaseStatus == 2){
                         mui.toast("已发送解除消息，对方接受后会通知你哦",2000);
                     }
                 }).catch(() => {})
             },
             //确认解除
             confirmRemoveClick(){
               this.closeLayer();
               console.log(this.personValue);
               this.releaseRelationship (this.personValue,1)
             },

             //关闭操作协议弹窗
             closeActionClick() {
                 this.popuShow = false;
                 this.actionPopShow = false;
                 clearTimeout(t);//清除倒计时
             },
             //点击合作协议
             protocolClick(){
                  this.protocolPopShow = true;
                  this.popuShow = true;
             },

             //关闭弹窗
             closeLayer(){
               this.popuShow = false;
               this.actionPopShow = false;
               this.protocolPopShow = false;
               this.removePopshow = false;
               clearTimeout(t);//清除倒计时
             },
             //关闭解除操作确认
             closeNoClick () {
                 this.popuShow = false;
                 this.protocolPopShow = false;
             },
             //关闭分成比例弹窗
             closeScale(){
                this.isScale = false;
             },
             //分转为元
             regFenToYuan (fen) {
                 var num = fen;
                 num=fen*0.01;
                 num+='';
                 var reg = num.indexOf('.') >-1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g;
                 num=num.replace(reg,'$1');
                 num = this.toDecimal2(num)
                 return num
             },
             toDecimal2 (x) {
                 var f = parseFloat(x);
                 if (isNaN(f)) {
                     return false;
                 }
                 var f = Math.round(x * 100) / 100;
                 var s = f.toString();
                 var rs = s.indexOf('.');
                 if (rs < 0) {
                     rs = s.length;
                     s += '.';
                 }
                 while (s.length <= rs + 2) {
                     s += '0';
                 }
                 return s;
             },
             //协议请求
             protocolAjax() {
                  this.$request.post(_basePath + '/activity/page20191018/queryProtocol.html',{type:0}).then((res) => {
                  this.protocolTitle = res.title;
                  this.protocolCon = res.content;
                 }).catch(() => {})
             }
         },
         destroyed() {
             window.removeEventListener('scroll', this.handleScroll)
         }
     };
 </script>

 <style lang="scss" scoped>
     @import "index";
     .artistCon{padding-bottom:1.8rem;}
     .loadTxt{
         margin-top:.2rem;
         height:.4rem;
         line-height:.4rem;
         text-align:center;
         color:#B6B3C5;
         font-size:.24rem;
     }

     .allContent{
         overflow:auto;
         -webkit-overflow-scrolling: touch; 

     }
     #pageTop{
         .isFixed{
             position:fixed;
             top:0;
             z-index:100;
             height:.9rem;
             background: #121223;
             width:100%;
         }
     }
 </style>

注意事项

1、监听滚动处理scroll

 mounted: function () {
             this.protocolAjax();
             this.broker();
             this.featchData();

             window.addEventListener('scroll', this.handleScroll);
         },

2、跳到另外一个页面再此返回手机上会出现一个黑屏，触摸才会把黑屏去掉，解决办法就是在返回页面的时候，再滚动到顶部

   watch:{
             $route(to,from){
                 window.scrollTo(0,20);
                 if(to.name == 'index'){
                     window.addEventListener('scroll', this.handleScroll);
                 } else {
                     window.removeEventListener('scroll', this.handleScroll)
                 }
             }
         },

3、scroll完以后要destroy

  destroyed() {
             window.removeEventListener('scroll', this.handleScroll)
         }

4、分页滚动处理

 //获取数据函数
             featchData:function (){
                 //如果已经在加载数据，不可以重复加载
                 if (this.lock) return;
                 this.lock = true;
                 this.loadTxt='正在加载中...';
                 this.$request.post(_basePath + '/activity/page20191018/queryArtistList.html',{pageNo:this.pageNo,pageSize:pageSize}).then((res) => {
                     this.artistTotal = res.total;

                     this.totalPage = res.total % pageSize > 0 ? Math.floor(res.total / pageSize + 1) : res.total / pageSize;
                     let result = [];
                     res.artistInfoList.forEach((item) =>{
                         result.push(item.userInfo.hwUserId)
                     })
                     this.$request.post(_basePath + '/activity/page20191018/batchQueryUserAccount.html',{userIdList:result}).then((res2) => {
                         res2.userAccountDetailList.forEach((item,i) =>{
                             res.artistInfoList[i].status = item.status;
                         })
                         this.artistInfoList = res.artistInfoList;
                     }).catch(() => {});

                     this.artistInfoList = [...this.artistInfoList, ...res.artistInfoList];
                      ++this.pageNo;
                     this.lock = false;
                     this.loading = false;
                     this.loadTxt='';
                 }).catch(() => {
                     this.lock = false;
                     this.loading = false;
                   })
             },

  handleScroll () {
               let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;//滚动条滚动的长度
               let _offsetHeight = document.querySelector('#pageTop').offsetHeight; //是指元素内容的高度
               let brokeHeight = document.querySelector('.brokerBlock').offsetHeight; //经纪人内容高度
               let clientHeightValue = document.documentElement.clientHeight || document.body.clientHeight;

              console.log("scrollTop",scrollTop,"_offsetHeight",_offsetHeight,"brokeHeight",brokeHeight,"clientHeightValue",clientHeightValue)
               if(scrollTop >  brokeHeight){ //滚动条滚动的距离超过经纪人的内容高度
                  this.isBroker = false;
               }else{
                   this.isBroker = true;
               }
               if(this.pageNo > 1){
                 //距离底部距离50就加载数据
                 if(_offsetHeight - clientHeightValue - scrollTop <= 50 ){
                     if (this.totalPage <= this.pageNo) {
                             setTimeout(() => {
                                 //mui.toast("已经没有更多了~");
                                 this.loadTxt='当当当~已经到底啦~';
                             }, 300)
                          return;
                     }else{
                         this.featchData();
                     }
                 }
               }
             },