Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ydui-滚动加载时，$refs没有yd-infinitescroll的ref #804

Open
ljw950213 opened this issue Jan 7, 2021 · 0 comments
Open

ydui-滚动加载时，$refs没有yd-infinitescroll的ref #804

ljw950213 opened this issue Jan 7, 2021 · 0 comments

Comments

@ljw950213
Copy link

问题描述

使用ydui的滚动加载组件时，一直无法正常滚动加载，排查后发现this.$refs中没有yd-infinitescroll的ref，未发现具体原因

产生环境

  • **使用版本：ydui--1.2.6， vue--2.3.3
  • **引入方式：NPM
  • **演示地址：-

提示错误信息

  1. 在浏览器中测试，没有报错，表现形式为滚动到底部后，没有重新加载数据，也没有调用callback

代码区域

<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ljw950213