func.api
是封装的ajax方法,apiConfig.getFollowMemberFollowList()
是对应的接口地址配置,Vue.prototype.func = func
是将常用的方法封装的一个js文件,追加的vue中,方便在vue中直接使用func
里面的方法。因为这个vue是
script
方法引入的,所以func
没有采用导入的方式使用:
<div v-if="list.length > 0" class="cunsultantUl" v-for="(vo,i) in list" :key="i"> <div class="cunsultantList"> <img :src="vo.ryxyMember.headPortrait"> <div> <ul class="cunsultant_infor"> <li>{{vo.ryxyMember.fullName || vo.ryxyMember.nickname || vo.ryxyMember.account}}</li> <li></li> </ul> <p class="certificate overflow-hidden">{{vo.ryxyMember.personalizedSignature}}</p> </div> </div> </div> <div class="noData" v-if="list.length === 0"> <img src="../no-data.png"> <p>暂无内容</p> </div>
<script type="text/javascript"> initVue(); //初始化vue function initVue() { 'use strict'; Vue.prototype.func = func; window.rootVue = new Vue({ el: '#rootWrap', data: { pageNumber: 1, // 第几页,要查第几页的数据就传几,默认是第一页 pageSize: 10, // 页大小,即每页最多展示的数据条数,默认是20 totalCount: 0, // 接口返回的总数 totalPage: 0, // 计算总页数 is_scroll: true,// 上拉加载相关 list:[], //列表数据 }, created: function() { var that = this; this.getList(); }, methods: { // 上拉加载方法 onScroll: function() { var that = this; var innerHeight = document.querySelector('#rootWrap').clientHeight || document.body.clientHeight; var outerHeight = document.documentElement.clientHeight var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if(outerHeight + scrollTop >= innerHeight) { if(that.is_scroll) { // 如果已经没有更多可加载了 这里直接return掉 if(that.pageNumber >= that.totalPage) { return } // 加载更多数据 that.pageNumber++; that.getList(); that.is_scroll = false; } } }, // 获取关注会员接口 getList: function() { var that = this; // 登录成功后才可以 if(func.getUserId()) { func.api(apiConfig.getFollowMemberFollowList(), { "pageNumber": that.pageNumber, "pageSize": that.pageSize, "memberId": func.getUserId(), }, function(ret) { if(ret.code == 0) { // 根据总条数计算总页数 that.totalCount = ret.data.totalCount; // 如果总数除以pageSize 余数为0 说明没有下一页了 if(ret.data.totalCount % that.pageSize == 0) { that.totalPage = parseInt(ret.data.totalCount / that.pageSize); } else { that.totalPage = parseInt((ret.data.totalCount / that.pageSize)) + 1; } var resultList = ret.data.list; // 接口返回的列表数据 // 如果是第一页 覆盖列表 如果是上拉加载的 直接拼接在后面 if(that.pageNumber == 1) { that.memberList = resultList; } else { that.memberList = that.memberList.concat(resultList); } // 过滤没有消息的数据 var newList = []; for(var i = 0; i < that.memberList.length; i++) { if(that.memberList[i].ryxyMember) { newList.push(that.memberList[i]); } } that.memberList = newList; that.is_scroll = true; } }, function(error) {}); } }, }, mounted: function() { //上拉滚动监听 window.addEventListener('scroll', this.onScroll) }, }); }; </script> </html>