帮我看看这代码列表里面内容的字是不是被压缩了 字体都变形了// 创建滚动列表方法
createRollRecordList(phone) {
console.log("开始创建滚动列表记录");
console.log("滚动列表数据:", this.getRollRecordList);
// 如果已经存在滚动容器，先移除旧的
if (this.rollContainers && this.rollContainers.parent) {
this.bindingContainer.removeChild(this.rollContainers);
}
// 创建滚动列表容器
this.rollContainers = new Container();
// ============ 根据图片调整位置 ============
// const rollWidth = 290 * this.app.rat; // 适当宽度
// const rollHeight = 510 * this.app.rat; // 适当高度
const rollWidth = this.phoneWidth* 0.18; // 适当宽度
const rollHeight = 510 * this.app.rat;
const xPos = this.overallWidth * -0.928; // 屏幕位置
const yPos = this.overallHeight * -0.55; // 屏幕偏上
this.rollContainers.position.set(xPos, yPos);
// 创建遮罩
const maskGraphics = new Graphics();
maskGraphics.beginFill(0x000000, 0.01);
maskGraphics.drawRect(0, 0, rollWidth, rollHeight);
maskGraphics.endFill();
// 创建滚动内容容器
this.rollContentContainer = new Container();
this.rollContentContainer.x = 0;
this.rollContentContainer.y = 0;
// 先添加内容容器，再添加遮罩
this.rollContainers.addChild(this.rollContentContainer);
this.rollContainers.addChild(maskGraphics);
// 设置遮罩
this.rollContentContainer.mask = maskGraphics;
// ============ 添加背景 ============
const bg = new Graphics();
bg.beginFill(0x6b4129, 0.8); // 绿背景 55aa00
bg.lineStyle(1, 0x6b4129); // 边框 f7d394
bg.drawRect(0, 0, rollWidth, rollHeight);
bg.endFill();
this.rollContainers.addChildAt(bg, 0); // 放到最底层
// 创建列表项
this.createRollRecordItems();
// 添加到bindingContainer
this.bindingContainer.addChild(this.rollContainers);
// 设置滚动交互
this.setupRollScrollInteraction();
}
createRollRecordItems() {
console.log("创建滚动列表项");
console.log("获取滚动列表数据:", this.getRollRecordList);
// 清空现有内容
if (this.rollContentContainer) {
this.rollContentContainer.removeChildren();
}
// 初始化本地化文本数组
if (!this.rollLocalTexts) {
this.rollLocalTexts = [];
} else {
this.rollLocalTexts = []; // 清空旧数据
}
let displayRecords = [];
if (this.getRollRecordList && Array.isArray(this.getRollRecordList) && this.getRollRecordList.length > 0) {
console.log("使用真实滚动列表数据，条数:", this.getRollRecordList.length);
displayRecords = this.getRollRecordList.map(record => {
return {
createDate: record.createDate, // 日期
account: record.account, // 账户号码
status: record.status, // 状态
amount: record.amount // 金额
};
});
// 按日期排序，最新的在前面
displayRecords.sort((a, b) => b.createDate - a.createDate);
// 限制显示条数（可选）
if (displayRecords.length > 20) {
displayRecords = displayRecords.slice(0, 20);
}
}
if (displayRecords.length === 0) {
console.log("没有滚动列表数据");
return;
}
// ============ 配置参数 ============
const itemWidth = this.rollContainers.width - 20 * this.app.rat;
const itemHeight = 40 * this.app.rat; // 每条记录高度
const itemSpacing = 5 * this.app.rat; // 减小行间距
const padding = 2 * this.app.rat; // 减小内边距
let currentY = padding;
// ============ 格式化函数 ============
const formatDate = (timestamp) => {
let timeValue = timestamp;
if (typeof timestamp === 'string') {
const parsedDate = Date.parse(timestamp);
if (!isNaN(parsedDate)) {
timeValue = parsedDate;
} else {
console.warn("无法解析日期:", timestamp);
timeValue = Date.now();
}
}
const date = new Date(timeValue);
const month = date.getMonth() + 1;
const day = date.getDate();
const year = date.getFullYear();
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');
return `${month}/${day}/${year} ${hours}:${minutes}:${seconds}`;
};
const getStatusColor = (status) => {
// 如果status是数字，转换为字符串
const statusStr = String(status);
switch(statusStr) {
case "1": return 0x00FF00; // 绿色-成功
case "0": return 0xFFFF00; // 黄色-处理中
case "-1": return 0x00FFFF; // 青色-待处理
case "2": return 0xFF0000; // 红色-失败
default: return 0xCCCCCC; // 灰色-未知
}
};
const encryptAccount = (account) => {
if (!account) return "****";
const str = account.toString();
if (str.length <= 4) return str;
const prefix = str.substring(0, 2);
const suffix = str.substring(str.length - 2);
const stars = "*".repeat(Math.max(1, str.length - 4));
return `${prefix}${stars}${suffix}`;
};
// ============ 创建记录项 ============
displayRecords.forEach((record, index) => {
// 创建单个记录容器
const itemContainer = new Container();
itemContainer.x = padding;
itemContainer.y = currentY;
// 添加背景色
// if (index % 2 === 0) {
// const bg = new Graphics();
// bg.beginFill(0xff0000, 0.2); // 浅绿色背景
// bg.drawRect(0, 0, itemWidth, itemHeight);
// bg.endFill();
// itemContainer.addChild(bg);
// }
// 添加水平分隔线（除了第一条）
if (index > 0) {
const divider = new Graphics();
divider.beginFill(0x000000, 0.5);
divider.drawRect(0, -itemSpacing / 2, itemWidth+10, 1);
divider.endFill();
itemContainer.addChild(divider);
}
// ============ 40px高度 ============
const lineHeight = itemHeight / 3; // 每行高度
// ============ 第一行：日期 ============
const dateText = new Text(formatDate(record.createDate), {
fontFamily: "Arial",
fontSize: 12 * this.app.rat,
fill: 0xFFFFFF, // 白色更清晰
fontWeight: "bold"
});
dateText.position.set(0, lineHeight * 0.5 - dateText.height / 2);
itemContainer.addChild(dateText);
// ============ 第二行：账户号码和状态 ============
const accountText = new Text(encryptAccount(record.account), {
fontFamily: "Arial",
fontSize: 12 * this.app.rat,
fill: 0xFFFFFF,
fontWeight: "bold"
});
accountText.position.set(0, lineHeight * 1.5 - accountText.height / 2);
itemContainer.addChild(accountText);
// 创建状态文本
const statusText = new Text("", { // 先创建空文本
fontFamily: "Arial",
fontSize: 11 * this.app.rat,
fill: getStatusColor(record.status),
fontWeight: "bold"
});
statusText.anchor.set(1, 0.5);
statusText.position.set(itemWidth-30, lineHeight * 1.5);
// 设置状态本地化标记
const statusKey = `status_${record.status}`;
statusText.localKey = statusKey;
this.rollLocalTexts.push(statusText);
itemContainer.addChild(statusText);
// ============ 第三行：提取 + Rp 金额 ============
const extractText = new Text("", {
fontFamily: "Arial",
fontSize: 12 * this.app.rat,
fill: 0xFFDD00,
fontWeight: "bold"
});
extractText.position.set(0, lineHeight * 2.5 - extractText.height / 2);
// 设置提取文本本地化标记
extractText.localKey = "extractText";
this.rollLocalTexts.push(extractText);
itemContainer.addChild(extractText);
const amountText = new Text(`Rp ${record.amount ? record.amount.toString() : "0"}`, {
fontFamily: "Arial",
fontSize: 12 * this.app.rat,
fill: 0xFFDD00,
fontWeight: "bold"
});
amountText.anchor.set(1, 0.5);
amountText.position.set(itemWidth, lineHeight * 2.5);
itemContainer.addChild(amountText);
this.rollContentContainer.addChild(itemContainer);
currentY += itemHeight + itemSpacing;
});
// ============ 更新内容容器高度 ============
const totalHeight = currentY + padding;
this.rollContentContainer.height = totalHeight;
if (this.isInist) {
this.applyRollLocalization();
}
}
// 滚动列表本地化
applyRollLocalization() {
if (this.rollLocalTexts && this.rollLocalTexts.length > 0) {
this.rollLocalTexts.forEach(textObj => {
if (textObj && textObj.localKey) {
super.setLocalWords(textObj, textObj.localKey);
}
});
}
}
// 设置滚动交互
setupRollScrollInteraction() {
console.log("设置滚动交互开始...");
if (!this.rollContainers || !this.rollContentContainer) {
console.warn("滚动容器未初始化");
return;
}
// 计算滚动范围
this.rollContainers.interactive = true;
this.rollContainers.eventMode = 'static';
this.rollContainers.cursor = 'grab';
console.log("滚动容器交互已启用");
let isDragging = false;
let startY = 0;
let startScrollY = 0;
const maxScroll = 0; // 允许向上滚动50px
const minScroll = -500; // 允许向下滚动50px
console.log("滚动范围:", { maxScroll, minScroll });
// 应用滚动位置
const applyScroll = (newY) => {
// 限制滚动范围
const limitedY = Math.max(minScroll, Math.min(maxScroll, newY));
this.rollContentContainer.y = limitedY;
};
// 鼠标按下
this.rollContainers.on('pointerdown', (event) => {
event.stopPropagation();
isDragging = true;
startY = event.data.global.y;
startScrollY = this.rollContentContainer.y;
this.rollContainers.cursor = 'grabbing';
});
// 鼠标移动
this.rollContainers.on('pointermove', (event) => {
if (!isDragging) return;
const deltaY = event.data.global.y - startY;
const newScrollY = startScrollY + deltaY;
applyScroll(newScrollY);
});
// 鼠标释放
this.rollContainers.on('pointerup', () => {
isDragging = false;
this.rollContainers.cursor = 'grab';
});
this.rollContainers.on('pointerupoutside', () => {
isDragging = false;
this.rollContainers.cursor = 'grab';
});
// 鼠标滚轮
this.rollContainers.on('wheel', (event) => {
event.preventDefault();
event.stopPropagation();
const currentY = this.rollContentContainer.y;
const newY = currentY + event.deltaY * 0.5;
applyScroll(newY);
});
}
// 刷新滚动列表的方法
refreshRollRecordList() {
console.log("刷新滚动列表数据");
if (this.rollContainers && this.rollContentContainer) {
this.createRollRecordItems();
// 重置滚动位置到顶部
this.rollContentContainer.y = 0;
// 重新设置滚动交互
this.setupRollScrollInteraction();
// 立即应用本地化
this.applyRollLocalization();
}
}
本文介绍如何使用AS3的addChild()和addChildAt()方法来控制子显示对象的层叠次序，并通过实例展示了如何创建不同颜色的圆形并调整它们的显示顺序。
扫一扫
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
