IOS苹果系统创建具有现代H5视觉效果的界面

QQ896757558 · 发表于 2025-9-18 08:13:32

// H5风格界面示例
// 这个示例展示如何创建具有现代H5视觉效果的界面
// ====================== 主视图 ======================
function createH5StyleView() {
// 创建主视图
var vc = new IOSView();
vc.show(() => {
var view = vc.getView();
printl("H5风格界面已启动");
// 创建标题栏
createHeader(view, vc);
// 创建轮播图
createCarousel(view);
// 创建功能卡片区域
createFeatureCards(view);
// 创建表单区域
createFormSection(view);
// 创建底部导航
createBottomNav(view, vc);
});
}
// ====================== 标题栏 ======================
function createHeader(view, vc) {
var header = new Horizontal();
header.setSpacing(10);
// 创建返回按钮
var backBtn = new Button();
backBtn.setText("<");
backBtn.setColor(255, 255, 255);
backBtn.setTextColor(0, 0, 0);
backBtn.setWidth(50);
backBtn.setHeight(50);
backBtn.onClick(() => {
vc.dismiss();
});
header.addView(backBtn);
// 创建标题
var titleLabel = new Label();
titleLabel.setText("H5风格演示");
titleLabel.setTextColor(0, 0, 0);
titleLabel.setWidth(200);
header.addView(titleLabel);
// 创建菜单按钮
var menuBtn = new Button();
menuBtn.setText("...");
menuBtn.setColor(255, 255, 255);
menuBtn.setTextColor(0, 0, 0);
menuBtn.setWidth(50);
menuBtn.setHeight(50);
menuBtn.onClick(() => {
printl("菜单按钮被点击");
});
header.addView(menuBtn);
view.addView(header);
}
// ====================== 轮播图 ======================
function createCarousel(view) {
var carousel = new Vertical();
carousel.setSpacing(10);
// 创建轮播图内容（模拟）
var carouselContent = new Button();
carouselContent.setText("轮播图内容");
carouselContent.setColor(0, 150, 255);
carouselContent.setTextColor(255, 255, 255);
carouselContent.setWidth(380);
carouselContent.setHeight(180);
carousel.addView(carouselContent);
// 创建轮播指示器
var indicators = new Horizontal();
indicators.setSpacing(5);
// 添加指示器点
for (let i = 0; i < 3; i++) {
var dot = new Button();
dot.setWidth(10);
dot.setHeight(10);
dot.setColor(i === 0 ? 0 : 150, i === 1 ? 150 : 0, 255);
dot.onClick(() => {
printl("切换到轮播图第" + (i+1) + "页");
});
indicators.addView(dot);
}
carousel.addView(indicators);
view.addView(carousel);
}
// ====================== 功能卡片 ======================
function createFeatureCards(view) {
var cardsContainer = new Vertical();
cardsContainer.setSpacing(10);
// 创建卡片标题
var cardsTitle = new Label();
cardsTitle.setText("功能模块");
cardsTitle.setTextColor(0, 0, 0);
cardsTitle.setWidth(400);
cardsContainer.addView(cardsTitle);
// 创建第一行卡片
var row1 = new Horizontal();
row1.setSpacing(10);
// 卡片1
var card1Button = createFeatureCard("数据统计", 255, 99, 71);
card1Button.onClick(() => {
printl("点击了数据统计卡片");
});
row1.addView(card1Button);
// 卡片2
var card2Button = createFeatureCard("设置", 65, 105, 225);
card2Button.onClick(() => {
printl("点击了设置卡片");
});
row1.addView(card2Button);
// 创建第二行卡片
var row2 = new Horizontal();
row2.setSpacing(10);
// 卡片3
var card3Button = createFeatureCard("帮助中心", 0, 128, 0);
card3Button.onClick(() => {
printl("点击了帮助中心卡片");
});
row2.addView(card3Button);
// 卡片4
var card4Button = createFeatureCard("关于我们", 165, 42, 42);
card4Button.onClick(() => {
printl("点击了关于我们卡片");
});
row2.addView(card4Button);
cardsContainer.addView(row1);
cardsContainer.addView(row2);
view.addView(cardsContainer);
}
// ====================== 创建功能卡片 ======================
function createFeatureCard(title, r, g, b) {
// 修复错误：直接创建一个带背景色的按钮作为卡片
var cardButton = new Button();
cardButton.setText(title);
cardButton.setColor(r, g, b);
cardButton.setTextColor(255, 255, 255);
cardButton.setWidth(150);
cardButton.setHeight(100);
return cardButton;
}
// ====================== 表单区域 ======================
function createFormSection(view) {
var formContainer = new Vertical();
formContainer.setSpacing(10);
// 表单标题
var formTitle = new Label();
formTitle.setText("用户反馈");
formTitle.setTextColor(0, 0, 0);
formContainer.addView(formTitle);
// 输入框1
var inputName = new Input();
// 修复拼写错误: setDefultText -> setPlaceholder
inputName.setPlaceholder("您的姓名");
inputName.setWidth(360);
inputName.setHeight(40);
formContainer.addView(inputName);
// 输入框2
var inputEmail = new Input();
// 修复错误: 应该设置inputEmail而不是inputName
inputEmail.setPlaceholder("您的邮箱");
inputEmail.setWidth(360);
inputEmail.setHeight(40);
formContainer.addView(inputEmail);
// 单选按钮组
var radioGroup = new RadioButtonGroup();
radioGroup.setID("feedbackType");
var radio1 = new RadioButton();
radio1.setText("功能建议");
radio1.setGroup(radioGroup);
var radio2 = new RadioButton();
radio2.setText("问题反馈");
radio2.setGroup(radioGroup);
var radio3 = new RadioButton();
radio3.setText("其他");
radio3.setGroup(radioGroup);
formContainer.addView(radio1);
formContainer.addView(radio2);
formContainer.addView(radio3);
// 提交按钮
var submitBtn = new Button();
submitBtn.setText("提交反馈");
submitBtn.setColor(0, 150, 255);
submitBtn.setTextColor(255, 255, 255);
submitBtn.setWidth(360);
submitBtn.setHeight(50);
submitBtn.onClick(() => {
printl("反馈已提交");
});
formContainer.addView(submitBtn);
view.addView(formContainer);
}
// ====================== 底部导航 ======================
function createBottomNav(view, vc) {
var bottomNav = new Horizontal();
bottomNav.setSpacing(10);
// 首页按钮
var homeBtn = new Button();
homeBtn.setText("首页");
homeBtn.setColor(0, 150, 255);
homeBtn.setTextColor(255, 255, 255);
homeBtn.onClick(() => {
printl("点击了首页");
});
bottomNav.addView(homeBtn);
// 消息按钮
var messageBtn = new Button();
messageBtn.setText("消息");
messageBtn.setColor(128, 128, 128);
messageBtn.setTextColor(255, 255, 255);
messageBtn.onClick(() => {
printl("点击了消息");
});
bottomNav.addView(messageBtn);
// 发现按钮
var discoverBtn = new Button();
discoverBtn.setText("发现");
discoverBtn.setColor(128, 128, 128);
discoverBtn.setTextColor(255, 255, 255);
discoverBtn.onClick(() => {
printl("点击了发现");
});
bottomNav.addView(discoverBtn);
// 我的按钮
var profileBtn = new Button();
profileBtn.setText("我的");
profileBtn.setColor(128, 128, 128);
profileBtn.setTextColor(255, 255, 255);
profileBtn.onClick(() => {
printl("点击了我的");
});
bottomNav.addView(profileBtn);
view.addView(bottomNav);
}
// ====================== 启动应用 ======================
createH5StyleView();

复制代码