Question

我正在尝试制作一个简单的文本点击游戏，以更好地理解Nativescript。

首先，我有一个带有介绍性文字和问题的标签。然后，我有3个按钮来回答这个问题。

一旦用户单击其中一个按钮，我希望第一个标签和3个按钮消失，并显示下一个标签。
这是我的代码：

这是我的home-page.js

var frameModule = require("tns-core-modules/ui/frame");
var HomeViewModel = require("./home-view-model");

var homeViewModel = new HomeViewModel();

exports.loaded = function (args) {
 var page = args.object;
 page.actionBarHidden = true;
 page.bindingContext = homeViewModel;
};

exports.SwordButton = function () {
 Display1 = false;
 Display2 = true;
 console.log("The Sword button was pressed");
};

exports.BowButton = function () {
 Display1 = false;
 Display2 = true;
 console.log("The Bow button was pressed");
};

exports.ShieldButton = function () {
 Display1 = false;
 Display2 = true;
 console.log("The Shield button was pressed");
};

这是我的home-page.xml：

<ActionBar title="Home" class="action-bar">
</ActionBar>
<StackLayout class="home-panel">
    <Label textWrap="true" text="Text game" class="h2 description-label" />

    <Label id="text1" textWrap="true" visibility="{{ Display1 ? 'visible' : 'collapsed' }}"
        text="It's a zombie apocalypse! You are looting a store when suddenly a zombie bursts in through the door. You frantically search for a weapon. You find a box containing a sword, a bow and a shield. Which one do you choose?"
        class="h2 description-label" />

    <Label id="text2" textWrap="true" visibility="{{ Display2 ? 'visible' : 'collapsed' }}" text="You chose poorly." />
    <Button text="Sword" tap="SwordButton" />
    <Button text="Bow" tap="BowButton" />
    <Button text="Shield" tap="ShieldButton" />
</StackLayout>

这是我的home-view-model.js：

var observableModule = require("tns-core-modules/data/observable");

  function HomeViewModel() {
    var weapon;
    var viewModel = observableModule.fromObject({
      Display1: true,
      Display2: false,

      textFieldValue: "",
  });

  return viewModel;
}

module.exports = HomeViewModel;

希望我能提供足够的信息为您提供帮助，如果没有，请告诉我。
希望您能提供帮助。

Answer 1

我修复了它。原来我忘了设置Display变量的新值。

这就是我新的SwordButton函数的样子。

exports.SwordButton = function () {
  Display1 = false;
  Display2 = true;
  console.log("The Sword button was pressed");
  homeViewModel.set("Display1", Display1);
  homeViewModel.set("Display2", Display2);
};

我对BowButton和ShieldButton函数做了同样的事情。

在buttonclick本机脚本上隐藏标签

1 个答案: