 | |  |  | IOS苹果系统创建具有现代H5视觉效果的界面
- // 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();
复制代码
| |  | |  |
|