Open ljw950213 opened 3 years ago
使用ydui的滚动加载组件时，一直无法正常滚动加载，排查后发现this.$refs中没有yd-infinitescroll的ref，未发现具体原因
<template> <yd-cell-item style="height: 50px;background-color: #ffffff;" href="/customer/addDonation" type="link"> <span slot="right" style="color: #0055ff;">Add Donation</span> </yd-cell-item> <yd-cell-group v-for="(group,i) in donationGrouplist" :key="i" style="margin-top: 1px;"> <yd-cell-item style="height: 50px;"> <span slot="left" style="color:#0055ff;font-weight: bold;"> <img src="static/img/group.png" style="width:25px;height:25px;vertical-align:middle;" /> <span style="vertical-align: middle;padding-left:5px;">{{group.groupName}}</span> </span> <span slot="right" style="margin-right:30px;vertical-align: middle;padding-left:5px;">zip:{{group.zipCode}}</span> <span slot="right"> <img src="/static/img/group-member.png" style="width:25px;height:25px;vertical-align:middle;" @click="saveOrUpdateGroupMember(1, group.groupId)" /> </span> </yd-cell-item> <yd-infinitescroll :callback="loadDonationGroup" distance="100" id="infinitescroll" ref="infinitescroll"> <yd-list theme="1" slot="list"> <yd-cell-item v-for="(donor, j) in group.donorList" :key="j"> <span slot="left" style="width: 100%;"> <img src="static/img/stu.png" style="width:20px;height:20px;vertical-align:middle;" /> <span style="margin-left: 10px;">{{donor.name}}</span> </span> <span slot="right" style="margin-right:30px;"> <span>{{donor.grade}}</span> </span> <span slot="right" style="margin-right:30px;"> <yd-icon name="feedback" color="#00d300" size="20px" @click.native="saveOrUpdateGroupMember(2, group.groupId, donor.id)"></yd-icon> </span> </yd-cell-item> </yd-list> <!-- 数据全部加载完毕显示 --> <span slot="doneTip">complete</span> <!-- 加载中提示，不指定，将显示默认加载中图标 --> <span slot="loadingTip">loading</span> </yd-infinitescroll> </yd-cell-group> <div style="margin-top:15px;text-align:center;color: #657180;" v-show="!loadMore"> No more data! </div> <yd-popup v-model="addDonorPopup" position="center" width="90%"> <yd-preview :buttons="addDonorBtns"> <yd-preview-header> <div slot="left" style="text-align:center;">Add Donors</div> </yd-preview-header> <yd-cell-item> <span slot="left">Name</span> <input slot="right" type="text" style="text-align:right;" placeholder="Enter Name" v-model="donorName" maxlength="50" onkeyup="value=value.replace(/[^\a-\z\A-\Z\0-\9\ \(\)\.]/g,'')"> </yd-cell-item> <yd-cell-item> <span slot="left">Grade</span> <input slot="right" type="text" style="text-align:right;" placeholder="Enter Grade" v-model="donorGrade" maxlength="50" onkeyup="value=value.replace(/[^\a-\z\A-\Z\0-\9\ \(\)\.]/g,'')"> </yd-cell-item> </yd-preview> </yd-popup> <yd-popup v-model="editDonorPopup" position="center" width="90%"> <yd-preview :buttons="editDonorBtns"> <yd-preview-header> <div slot="left" style="text-align:center;">Edit Donors</div> </yd-preview-header> <yd-cell-item> <span slot="left">Name</span> <input slot="right" type="text" style="text-align:right;" placeholder="Enter Name" v-model="donorName" maxlength="50" onkeyup="value=value.replace(/[^\a-\z\A-\Z\0-\9\ \(\)\.]/g,'')"> </yd-cell-item> <yd-cell-item> <span slot="left">Grade</span> <input slot="right" type="text" style="text-align:right;" placeholder="Enter Grade" v-model="donorGrade" maxlength="50" onkeyup="value=value.replace(/[^\a-\z\A-\Z\0-\9\ \(\)\.]/g,'')"> </yd-cell-item> </yd-preview> </yd-popup> </template> <script> import msg from '../../../static/js/msg-utils.js' import cfg from '../../../static/js/sys-config.js' import axios from '../../../static/js/axios-utils.js' export default { components: { layoutEx, }, data() { let me = this; return { winHei: screen.availHeight, //屏幕高度 page: 1, pageSize: 10, loadMore: true, donationGrouplist: [], tabStyle: '', addDonorPopup: false, editDonorPopup: false, curGroupId: '', curDonorId: '', donorName: '', donorGrade: '', addDonorBtns: [{ text: 'Cancel', click: () => { me.hidePopup(); } }, { text: 'Add', click: () => { if (!me.donorName) { msg.error("Donor's name must not be null!"); return; } if (!me.donorGrade) { msg.error("Donor's grade must not be null!"); return; } let url = ‘#’; let params = { token: me.$store.state.cst.token, groupId: me.curGroupId, name: me.donorName, grade: me.donorGrade }; msg.loading(); axios.post(url, params, function(data) { msg.unloading(); msg.success("Success!"); me.page = 1; me.loadMore = true; me.loadDonationGroup(); me.hidePopup(); }, function(data) { msg.unloading(); msg.error("Add failed!" + data + " Please retry later!"); me.hidePopup(); }); } } ], editDonorBtns: [{ text: 'Cancel', click: () => { me.hidePopup(); } }, { text: 'Del', click: () => { if (!me.curMemberId || !me.curGroupId) { msg.error("System Failure! Please retry later!") return; } msg.confirm("Do you want to delete this donor?", () => { let url = ‘#’; let params = { token: me.$store.state.cst.token, memberId: me.curMemberId, groupId: me.curGroupId, }; msg.loading(); axios.post(url, params, function(data) { msg.unloading(); msg.success("Success!"); me.page = 1; me.loadMore = true; me.loadDonationGroup(); me.hidePopup(); }, function(data) { msg.unloading(); msg.error("Delete failed!" + data + " Please retry later!"); me.hidePopup(); }); }); } }, { text: 'Save', click: () => { if (!me.donorName) { msg.error("Donor's name must not be null!"); return; } if (!me.donorGrade) { msg.error("Donor's grade must not be null!"); return; } let url = ‘#’; let params = { token: me.$store.state.cst.token, memberId: me.curMemberId, groupId: me.curGroupId, name: me.donorName, grade: me.donorGrade }; msg.loading(); axios.post(url, params, function(data) { msg.unloading(); msg.success("Success!"); me.page = 1; me.loadMore = true; me.loadDonationGroup(); me.hidePopup(); }, function(data) { msg.unloading(); msg.error("Save failed!" + data + " Please retry later!"); me.hidePopup(); }); } } ], } }, mounted() { let me = this; let clientHeight = document.body.clientHeight; //屏幕高度 let tabHeight = clientHeight - 55 * 2 - 40; //减掉header和bottom let tabStyle = `overflow:auto; height:${tabHeight}px;`; me.tabStyle = tabStyle; me.loadDonationGroup(); }, destroyed() { let me = this; }, methods: { loadDonationHistory() { let me = this; let url = ‘#’; let params = { token: me.$store.state.cst.token }; axios.get(url, params, function(data) { me.donationHistlist = data; }); }, loadDonationGroup() { let me = this; let start = 0; if (me.page > 1) { start = (me.page - 1) * me.pageSize; } let limit = me.pageSize; let url = ‘#’'; let params = { token: me.$store.state.cst.token, start: start, limit: limit } axios.get(url, params, function(data) { console.log(data) console.log(me.page) if (me.page == 1) { me.donationGrouplist = data; } else { for (let i in data) { me.donationGrouplist.push(data[i]); } } if (data.length < me.pageSize) { console.log("p") me.loadMore = false; me.$refs.infinitescroll.$emit("ydui.infinitescroll.loadedDone"); return; } else { console.log(me.$refs) // 这里打印{} console.log(me.$el.querySelector('#infinitescroll')) //这里打印null me.$refs.infinitescroll.$emit("ydui.infinitescroll.finishLoad"); } me.page++; me.$refs.infinitescroll.$emit("ydui.infinitescroll.reInit"); }, function(data) { }); }, // curPopup为1时，显示添加Donor弹窗 // curPopup为2时，显示编辑Donor弹窗 saveOrUpdateGroupMember(curPopup, curGroupId, curMemberId) { let me = this; if (curPopup == 1) { me.curGroupId = curGroupId; me.curMemberId = ''; me.addDonorPopup = true; } if (curPopup == 2) { me.curGroupId = curGroupId; me.curMemberId = curMemberId; let url = '####'; let params = { memberId: me.curMemberId }; axios.get(url, params, function(data) { me.donorName = data.name; me.donorGrade = data.grade; me.editDonorPopup = true; }); } }, hidePopup() { let me = this; me.addDonorPopup = false; me.editDonorPopup = false; me.curGroupId = ''; me.curMemberId = ''; me.donorName = ''; me.donorGrade = ''; } } } </script> <style scoped> .donorDiv { width: 100%; display: flex; align-items: center; justify-content: center; } </style>
问题描述
使用ydui的滚动加载组件时，一直无法正常滚动加载，排查后发现this.$refs中没有yd-infinitescroll的ref，未发现具体原因
产生环境
提示错误信息
代码区域