javascript - 将 slider 添加到演示应用程序

标签 javascript nativescript

我正在尝试向其中一个演示应用程序添加 slider 。我通过添加

向 home-fragment.xml 添加了一个 slider
<Slider value="{{ slider }}" horizontalAlignment="center" width="80%"/>

现在我希望能够从我的 View 模型中编辑和读取此 slider 的数据。根据the slider documentation我需要导入 slider 然后创建它。我的代码现在如下所示:

import { Slider } from "tns-core-modules/ui/slider";

const observableModule = require("data/observable");
const slider = new Slider();

function HomeViewModel() {
    const viewModel = observableModule.fromObject({

    });
    slider.value = 0;

    return viewModel;
}

module.exports = HomeViewModel;

Visual Studio Code 不显示任何错误,但启动应用程序后出现以下错误:

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.app/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: 
Calling js method onCreate failed

Error: Building UI from XML. @file:///app/tabs/tabs-page.xml:30:13
 > Unexpected token import
File: "file:///data/data/org.nativescript.app/files/app/tns_modules/tns-core-modules/ui/builder/builder.js, line: 208, column: 20

我是 Nativescript 的新手,可能在架构或设置中犯了错误。有人可以帮助我告诉我出了什么问题以及如何解决它吗?

最佳答案

这可能是由多种原因造成的,但有一件事是确定的:您不需要导入该 Slider 组件来设置其值。您可以简单地绑定(bind)到一个属性 (slider = 20;)。

开始使用 NativeScript 并了解这些 UI 小部件如何工作的最简单方法是使用 Playground。我创建了一个带有 Slider 的小项目,向您展示它如何在“普通”NativeScript 和 TypeScript 中工作:https://play.nativescript.org/?template=play-tsc&id=I7SGei

关于javascript - 将 slider 添加到演示应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49779544/

相关文章:

javascript - 如何使用 javascript 获取 HTML 中的具体元素

javascript - 使 TABLE COLUMN 可选择的 XHTML/CSS/Javascript 方法?

javascript - jQuery Slider - 变得更快

javascript - 如何使用 NativeScript 的 BarcodeScanner 插件

android - 扩展类时出现 ClassNotFoundException

javascript - react native 元素输入左图标移位?

NativeScript tns run android --device/emulator 不起作用

java - 安装了最新的 JDK 1.8.0,但我的 Javac -version 仍然显示旧版本 (Windows 7 - 64)

javascript - nativescript 中有 localstorage 吗?

javascript - 修复 asp.net 中 div 的按钮