使用Nativescript Vue进行拖放
Nativescript Vue是一种基于Vue.js框架的移动应用开发工具，它允许开发者使用Vue.js语法和组件系统来构建跨平台的原生移动应用。使用Nativescript Vue进行拖放操作可以实现在移动应用中方便地拖动和放置元素的功能。
拖放是一种常见的用户交互操作，它可以让用户通过点击并拖动元素，在目标位置上释放来完成特定的操作，如调整元素位置、创建快捷方式等。Nativescript Vue提供了一些内置的组件和API来支持拖放操作。
在Nativescript Vue中，可以使用Draggable组件和Droppable组件来实现拖放功能。Draggable组件用于将某个元素标记为可拖动的，而Droppable组件用于将某个元素标记为可放置的目标。通过在Draggable组件上添加事件监听，可以在拖动开始、移动过程和放置结束时触发相应的事件回调函数，从而实现拖放操作的逻辑。
Nativescript Vue还提供了一些可定制的属性和事件，用于控制拖放的行为和样式。例如，可以通过设置dragImage属性来指定拖动时显示的自定义图片；可以通过设置dropZones属性来限制拖放操作只在特定的区域内有效；可以通过设置dragStartMode属性来定义拖动操作的触发方式等。
使用Nativescript Vue进行拖放操作可以为移动应用增加更强大的交互性和可操作性。拖放功能可以应用在各种场景中，例如创建自定义的拖动排序列表、实现拖拽式布局编辑器、支持拖拽式文件管理等。
在腾讯云的云计算产品中，推荐使用腾讯云移动开发平台（Tencent Cloud Mobile Developer Platform）来支持Nativescript Vue开发。该平台提供了丰富的移动应用开发工具和服务，包括移动应用托管、数据存储、消息推送、实时通信等，可帮助开发者快速构建和部署基于Nativescript Vue的移动应用。
更多关于Nativescript Vue的信息和使用指南，您可以访问腾讯云开发者平台的官方文档：Nativescript Vue开发指南
相关·内容
2回答
我正在学习nativescript-vue，现在我想将nativescript-vue用于meteorjs后端。谁能告诉我如何将nativescript-vue与meteorjs后端集成？
浏览 41提问于2019-03-11得票数 0
大概一周前，nativescript失去了与vue devtools对话的能力。参见。运行此 -- (您需要将main.js中的host变量更改为您计算机的网络地址)。
以下是我尝试过的一些方法：
在连接到connect_error -> reconnect循环中的devtools套接字时似乎卡住了。不幸的是，connect error事件的参数为null，因此没有明确的失败原因。
下面是来自该项目的package.json --它们都是使用命令行界面初始化项目后的默认值：
{
"name": "nsvue-devtools-test",
"
浏览 35提问于2019-03-29得票数 1
回答已采纳
我很想知道如何在本地文本-vue中使用RadListView。
目前，我加载了RadListView：
// Rad List View
import RadListView from 'nativescript-ui-listview/vue';
Vue.use(RadListView);
在组成部分中使用：
<template>
<Page>
<ActionBar>
<Label text="Home"/>
</ActionBar>
<StackLay
浏览 3提问于2021-05-14得票数 1
我使用以下命令vue init nativescript-vue/vue-cli-template <project name>创建了项目 这是我用来调试ns debug ios/android的命令 这在以前的版本中开箱即用 研究之后，我发现这个domainDebugger.getNetwork()返回了undefined (不知道这是否是原因，如果是的话，如何修复它)。 地址：node_modules/@nativescript/core/http/http-request/index.ios.js 添加了当前包JSON "dependencies":
浏览 29提问于2021-01-24得票数 1
回答已采纳
我不知道如何使用Tab组件的Nativescript-vue后，上升的国家转录8.1.
下面的代码是Nativescript操场上的集体工作，但是在我的项目中出现了错误。
Home.vue
<StackLayout row="1">
<Tabs>
<TabStrip>
<TabStripItem>
<Label text="Newest" />
浏览 10提问于2021-11-14得票数 1
我的项目使用@Nativescript/firebase()忽略firebase.firestore.timestamp方法，并按属性返回undefined。
以下是最小繁殖量。
app.js
import Vue from "nativescript-vue";
import Home from "./components/Home";
var firebase = require("@nativescript/firebase").firebase;
firebase
.init({})
.then(
function (
浏览 7提问于2021-11-05得票数 0
我正试着用vue来学习本族语。我已经了解到了devtools，以及应该有一个电子独立应用程序，与npx vue-devtools，但它没有打开任何窗口。
这是一个用vue init nativescript-vue/vue-cli-template <name>构建的基本应用程序，所以它应该可以“开箱即用”。
这个应用程序在模拟器和真实设备上都能工作，所以我不知道哪里出了问题。我已经重新安装和重新输入项目多次，但什么都没有。
这是package.json
"name": "test_devtools",
"version":
浏览 1提问于2020-04-18得票数 0
1回答
我正在尝试将nativescript模块添加到vue-nativescript中。 我需要的指令： nativescript-ng-shadow。 如何导入add到vue？ 我试着这样做： Vue.registerElement('shadow', () => require('nativescript-ng-shadow').NgShadowModule) 和 new Vue({
directives: {
shadow: () => require('nativescript-ng-shadow').NgShadowM
浏览 10提问于2019-01-02得票数 0
回答已采纳
我尝试使用带有nativescript-vue的vue路由器，但是我得到了错误不能向查看组添加空子视图
我遵循了nativescript的文档，试图将路由器放到外部文件中，但我也得到了同样的错误。
import Vue from "nativescript-vue";
import VueDevtools from 'nativescript-vue-devtools';
Vue.use(VueDevtools, { host: '10.0.0.108' })
// import router from './router';
浏览 0提问于2019-01-05得票数 0
1回答
我刚接触nativescript和“npm相关”开发，并试图创建我的第一个NativeScript-Vue应用程序，但遇到了一些麻烦。 1)首先，当我使用import Vue from 'nativescript-vue';语法而不是const Vue = require('nativescript-vue');时，我得到这样的异常： An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to create appl
浏览 14提问于2019-03-24得票数 1
回答已采纳
1回答
我在我的移动应用程序中实现了nativescript ()插件。它过去运行良好，但是由于我更新到11.1.3版本，所以无法获得推送令牌。我试着回到10.6.3版本，但它说，当我执行npm安装时，它不再可用。
以下是我在我的main.js中所做的
import { messaging } from "@nativescript/firebase/messaging";
import { firebase } from "@nativescript/firebase"
firebase.init({
onMessageReceivedCallback: fu
浏览 13提问于2022-01-27得票数 0
回答已采纳
我希望能够在Vue实例方法中使用类型记录，如nativescript-vue.org中所记录的那样。
当我使用vue init nativescript-vue/vue-cli-template <project-name>创建一个新的nativescript项目时，调试屏幕中会出现以下警告。
tns debug android
总是给出下列错误行..。
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> CreateElement(NativePage)'
JS: '{NSVue (Vue: 2.6.10 | N
浏览 4提问于2020-03-06得票数 0
回答已采纳
我按照的建议生成一个应用程序
vue init nativescript-vue/vue-cli-template test03
cd test03
npm install
tns build android
tns preview
在预览阶段，我得到以下错误：
LOG from device HUAWEI P10 lite: com.tns.NativeScriptException: Error calling module function
TypeError: Cannot read property 'on' of undefined
File: "fi
浏览 2提问于2019-09-01得票数 4
2回答
我使用以下指南创建了一个带有NativeScript应用程序的Vue.js：
这些命令创建以下代码结构：
我正在尝试用代码调试这个应用程序。我安装了VS代码的NativeScript扩展。这产生了以下launch.json配置：
{
"name": "Launch on Android",
"type": "nativescript",
"request": "launch",
"platform": "android",
浏览 1提问于2018-07-04得票数 2
我正在尝试学习NativeScript-VUE，并按照本教程将SQLite连接到NativeScript。
已发出以下命令。
vue init nativescript-vue/vue-cli-template vuex-project
cd vuex-project
npm install
所有的结果都没有任何错误。
但是vuex-project目录结构没有"src“文件夹来继续本教程。我们应该手动创建它们吗？
编辑:我正在学习的教程是
浏览 1提问于2019-07-15得票数 0
一般来说，我对Nativescript和移动应用程序开发是个新手。如何更新项目中的"nativescript-vue“包？我的项目有nativescript-vue版本2.4.0，但我正在尝试更新到版本2.6.1。 这是我的项目中packson.json的一个片段。 "@nativescript/theme": "~2.2.1",
"nativescript-vue": "~2.4.0",
"tns-core-modules": "~6.3.0"
浏览 35提问于2020-09-24得票数 0
刚刚开始尝试使用nativescript-vue。由于它很新，似乎找不到关于nativescript-vue与graphql集成的好文档。已尝试，但无法安装。当我执行vue add apollo时，它会出错。有没有关于如何将nativescript-vue与graphql后端集成，或者更具体地说是通过apollo集成的好文档
浏览 0提问于2019-05-14得票数 2
执行静态绑定生成器：错误:文件已经存在。这可能导致不想要的行为。请更改其中一个扩展类的名称。File:C:\repo\geo\geoapp\platforms\android\app\src\main\java\com\tns\FragmentClass.java类: com.tns.FragmentClass
我一直在犯这个错误。它从尝试让@nativescript/geolocation插件开始工作开始。它编译了，但是当调用geolocation.watchLocation()方法时，应用程序会崩溃。这就是我想要修复的。我运行了几次ns clean，重新启动，并删除了c:\users\&
浏览 10提问于2021-10-28得票数 1
1回答
我使用nativescript-vue和这个插件来发送推送通知：
nativescript-plugin-firebase
发送推送通知时，如何发送图片？
在我的nativescript-vue项目中，我收到如下通知：
firebase.init({
showNotificationsWhenInForeground: true,
onMessageReceivedCallback: async (message) => {
})
如何在通知中显示图像？我尝试过包含image："url“，但这并不管用。我认为有一种方法可以在通知中显示图像，因为在firebas
浏览 11提问于2020-08-01得票数 0
Nativescript + Vue项目
NativeScript CLI版本: 5.4.2
package.json
"dependencies": {
"axios": "0.19.0",
"jwt-decode": "2.2.0",
"moment": "^2.24.0",
"nativescript-iqkeyboardmanager": "^1.5.1",
"nativescript-pul
浏览 0提问于2019-07-18得票数 1
回答已采纳
我在使用vue-cli-template将nativescript-vue安装到nativescript -vue时遇到了问题。正如前面提到的，我应该在npm上安装，然后清理构建。所以我安装了模块：
npm i --save nativescript-audio
npm run clean
然后尝试先用“require”来实现：
const audio = require('nativescript-audio');
const player = new audio.TNSPlayer();
然后使用"import"：
import { TNSPla
浏览 5提问于2018-04-23得票数 0
我正在尝试使用TypeScript创建一个NativeScript-Vue项目。我已经设法让事情发展到它抱怨的地步：
ERROR in app.ios.js from UglifyJs
Unexpected token: operator (>) [app.ios.js:132,15]
令人不快的一行是：
new __WEBPACK_IMPORTED_MODULE_0_nativescript_vue___default.a({
// This line right here:
render: h => h(__WEBPACK_IMPORTED_MODULE_1__
浏览 0提问于2018-05-30得票数 0
我的Nativescript-Vue项目毫无理由地停止了工作，我不知道为什么。gradle构建正在因此错误而崩溃：
D8: Program type already present: android.support.v4.app.INotificationSideChannel$Stub$Proxy
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:transformClassesWithMultidexlistForDebug'.
>
浏览 0提问于2019-06-20得票数 0
回答已采纳
这是我在NativeScript ( ns )上的第一个项目，所以我对它有点陌生，不知道在ns世界中一切是如何工作的。
对于我的项目，我使用最新的ns版本设置了ns+vue+ts项目，即8.1.5。
在我开始添加一些库之前，一切都很好。第一个警报是安装和安装nativescript-google-maps-sdk，每个教程和官方文档都告诉您需要以这样的方式打开SDK (示例可能有所不同，但所有示例都需要platform)：
import * as platform from "platform";
if (platform.isIOS) {
GMSServices.p
浏览 4提问于2021-12-08得票数 1
我尝试在我的NativeScript应用程序中导入Nota nativescript Webview (参见)。
我在操场web应用程序中添加了npm包，没有任何错误或问题。
在我的app.js文件中使用以下代码：
import Vue from 'nativescript-vue';
import App from './components/App';
import '@nota/nativescript-webview-ext/vue';
Vue.config.silent = false;
new Vue({
render:
浏览 0提问于2019-06-11得票数 1
回答已采纳
2回答
我有一个关于安装pluin…的问题尝试了2周的，但仍未得到。
我在{NS}-vue上使用-vue，在npm安装之后，我做rm -rf platform，并在app.js文件中添加Vue.registerElement('BarcodeScanner', () => require('nativescript-barcodescanner').BarcodeScannerView)。在Home.vue中，我添加
<BarcodeScanner
row="1"
height="300"
format
浏览 1提问于2019-02-15得票数 0
回答已采纳
如何从Nativescript应用程序中使用GraphQL API？
如何为nativescript-vue修改它
包应该直接工作吗？甚至还有一些“有角度的阿波罗”的例子。但不幸的是，我找不到关于本族语的指导。说有本土化的核心。但它是否也适用于本地文本-vue？
有一个。
有角度的回答是：
import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { NativeScriptHttpClientModule } from 'nativescript-angu
浏览 5提问于2020-02-22得票数 1
回答已采纳
上VUE的完整解决方案。
我正在用NativeScript Vue创建一个应用程序，我使用webview作为主要组件。在加载的网站上有一个文件输入字段来捕获相机输入。
它在iOS设备上工作得很好，但是在Android上，输入字段不工作。
有没有人知道让文件输入字段在Android上工作的解决方案？
我使用版本: 6.1.1
更新1
我用的是哪个站台？
安卓
10.0
仿真器像素3a
有关堆栈的更多信息：
CLI: 6.1.2
nodejs: v10.16.0
tns-核心-模块:tns-核心-模块@6.1.1
运行时：
“”：{“版本”："6.1.
浏览 4提问于2019-09-30得票数 2
回答已采纳
1回答
我刚接触nativescript-vue，我已经用vue-cli和nativescript-vue模板搭建了我的应用程序，我的文件夹结构如下：
注意global.scss和app.scss，这些文件中的样式都没有应用到我的.vue单文件组件中，我是不是遗漏了什么？
浏览 2提问于2020-07-11得票数 0
我在我的main.js文件中导入这个简单的Vue组件(NativeScript-Vue应用程序)
App.vue
<template>
<Page>
<ActionBar title="Welcome to NativeScript-Vue!"/>
<StackLayout>
<Label class="message" :text="msg" col="0" row="0" @tap="log"/>
浏览 1提问于2019-01-11得票数 0
我刚刚运行了tns run ios --emulator，我得到了这个：
/Users/me/Desktop/proj/projfront/App/platforms/ios/Pods/MBProgressHUD/MBProgressHUD.m:87:34: error: no known class method for selector
'labelColor'
_contentColor = [[UIColor labelColor] colorWithAlphaComponent:0.7f];
浏览 3提问于2020-02-03得票数 0
回答已采纳
我正在为正确的导航而苦苦挣扎，一旦我回到主站点，就会遇到崩溃。这发生在我的iOS设备和虚拟设备上。
我的结构如下：
我的package.json中的依赖项：
"dependencies": {
"@nativescript/core": "7.1.3",
"@nativescript/theme": "3.0.1",
"@nstudio/nativescript-cardview": "2.0.1",
"axios": "^0.
浏览 2提问于2021-01-20得票数 0
我已经创建了一个新的Nativescript项目，但是CSS没有工作、范围和全局。但是内联CSS就像下面的代码块一样正常工作。
和
有小费吗？提亚
这是我的main.js：
import Vue from 'nativescript-vue'
import Home from './components/Home'
import VueDevtools from 'nativescript-vue-devtools'
import FontIcon from 'nativescript-vue-fonticon'
import
浏览 5提问于2020-09-13得票数 2
回答已采纳
在使用nativescript-vue构建应用程序时，有一个关于nativescript-ui-sidedrawer插件的有趣问题
当我使用tns preview命令预览我的应用程序时，一切都按预期运行。但是，每当我尝试使用tns debug ios --bundle在iOS模拟器中运行该应用程序时，当我尝试查看使用该插件的组件时，都会收到以下消息：
TypeError: Could not load view for: NativeRadSideDrawer. TypeError: The superclass is not an object. ../node_modules/native
浏览 2提问于2020-08-12得票数 0
我目前正在做一个小小的Nativescript vue项目，我对这项技术非常陌生。我正在尝试从本地路径加载一个图像。当src是和http链接时，这一切都很好，但是，对于资产文件夹中的本地图像，没有任何工作。我正在运行Nativescript 6.0.2和Vue 3.9.3。我按照Nativescript vue网站上的指南输入了这个项目。
我尝试过不同的东西。
<Image src="../assets/images/NativeScript-Vue.png" stretch="none" col="2" row="0"/&
浏览 0提问于2019-07-26得票数 1
回答已采纳
问题:在调用使用axios的vue方法(通过@tap)时，我得到以下错误："Error: Request failed with status code 429“
我在网站上使用了相同的方法，它的工作效果与预期一致(除了async/await部分，它是从建议中添加的-请参阅相关部分的评论)。
仿真器(Pixel 2API 28)可以访问网络。
关于我的应用程序设置的信息：
@package.json：
"dependencies": {
"@nativescript/theme": "^2.2.1",
"@vu
浏览 101提问于2020-05-04得票数 0
我每件事都是按照指南做的。我安装了一个测试应用程序并试图更改Home组件上的消息，但我看到只有css动态重新加载。没有错误，没有问题，也没有注释，只是我的android模拟器只对css的变化做出反应，而对js的变化没有反应。同时，在控制台中的每个代码更改(css或js)之后，我看到JS: HMR成功地成功地应用了更新。知道以前所有的人力资源管理问题，这些问题还存在吗？我的package.json：
{
"name": "example-app",
"main": "app/app.ts",
"version&#
浏览 17提问于2022-09-21得票数 0
我试图在基于nativescript/vue-cli的应用程序中使用nativescript声音包。
npm安装-保存本地记录-声音
安装此程序后，我运行npm干净，然后尝试调用我的项目的main.js文件中的nativescript声音。
require("nativescript-vue").registerElement("sound", () => require("nativescript-sound").sound);
当我试着跑
npm运行手表:android
编译器显示了错误。
误差
ERROR in ./
浏览 0提问于2018-05-24得票数 3
我是NativeScript的新手，我正在尝试使用vue创建一个新的应用程序，下面的说明是：
注意:我使用的是vue-cli v3，所以我不得不使用vue create <project-name>而不是vue init nativescript-vue/vue-cli-template <project-name>，然后使用vue add vue-cli-plugin-nativescript-vue。
在我的安卓设备上执行tns preview时，我得到了以下错误：
有人知道我做错了什么吗？我正在尝试创建一个简单的移动应用程序，在安装阶段我得到了一个错误。
浏览 3提问于2020-04-13得票数 0
回答已采纳
我对vue.js和nativescript感兴趣，但我不知道如何制作材料设计的应用程序。这是因为，我不太清楚vue-nativescript是如何工作的。我已经找到了这个记录良好的，我一直在想，我是否可以将它用于移动应用程序。
它是否可以在本地文本中使用，还是仅针对移动网页？
如果没有，有没有办法在材料设计中强制渲染vue-nativescript应用程序？
浏览 2提问于2018-02-20得票数 0
回答已采纳
我正在尝试使用带有nativescript-vue的条形图扫描插件，所以首先我使用npm在我的项目中安装它：
npm安装nativescript-barcodescanner
然后我在src/main.js文件中注册它：
require('nativescript-barcodescanner').BarcodeScanner) Vue.registerElement('BarcodeScanner'，() => BarcodeScanner
然后我尝试了很多方法来在我的vue组件中包含扫描器，但是我总是得到一个错误。有谁知道如何在nativescript
浏览 2提问于2018-07-22得票数 0
回答已采纳
我使用这段代码在NativeScript + Vue中移动一个NativeScript
this.$refs.cover.nativeView.animate({ translate: { x: 0, y: 100} } )
我的问题是:由于我们不能在NativeScript中访问CSS的属性，我如何通过设置CSS来将布局设置为：( top: 100 )，只是ONLY。
或者，如果我想更准确地问:哪个属性将被nativeView.animate操作以将我的布局放在translate: { x: 0, y: 100 }位置？
浏览 3提问于2019-10-14得票数 0
回答已采纳
谢谢你阅读我的问题。以下是我的情况：
Nativescript Cli版本:6.0.1
Vue: 4.1.2
Npm版本: 6.13.4
后端:Laravel6.13.1带护照
我正在学习本教程
我的login.vue组件屏幕代码如本教程所示：
<template lang="html">
<Page @loaded="checkToken">
<ActionBar title="Login" />
<StackLayout>
浏览 1提问于2020-03-03得票数 0
回答已采纳
我正在尝试实现Nativescript-Webview-Interface。在我的例子中，一切在IOS模拟器上都工作得很好，但在Android上从Native应用程序向Webview发出/调用callJSFunction时出现错误。
chromium: [WARNING:dns_config_service_posix.cc(342)] Failed to read DnsConfig.
System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onTou
浏览 0提问于2020-09-29得票数 0
使用Vue.js / NativeScript (radDataForm)，我希望在使用JSON作为源时重新排序字段的显示。我的当前代码可以工作，但显示如下：
相册名称
波段名称
拥有权
年
借来
这不是代码中的顺序。
我知道这一点：
<df:EntityProperty name="albumName" displayName="Name of Album" index="0" />
但是，如何添加index="0"**to 对象？**
还有-我不知道这是干什么的？
str: "&
浏览 0提问于2019-01-27得票数 1
回答已采纳
当我从一个页面导航到另一个页面时，nativescript-vue中的Vue js中的devtools根本不会更新。
它只显示当前页面，而不显示我导航的位置。
正如您在图像中看到的，它堆叠在UserCreation上，我正在导航到VerifyCode页面。
我使用的是nativescript-vue
浏览 0提问于2020-02-08得票数 0
如果你使用的是NativeScript Vue标签导航，我有一个关于导航的问题。我正在使用NativeScript团队提供的Nativescript Vue Tab导航模板(https://market.nativescript.org/plugins/tns-template-tab-navigation-vue)，并尝试使用浏览组件中的一个简单按钮从浏览组件导航到项目组件。因此，我希望能够导航到另一个组件，而无需单击模板中提供的选项卡之一。有谁能给我指个方向吗？干杯! App.vue:
<template lang="html">
<Bottom
浏览 18提问于2020-06-10得票数 0
1回答
我正在尝试学习nativescript-vue，在那里我使用Nativescript的游乐场来试用我的示例代码。我试图使用nativescript-localstorage包，以便将一些信息存储到本地存储中：
每当我试图保存项目时，它都给出了use编译错误
以下是错误：
在传输本地存储/localstorage.js时发生了错误。未知:我们找到了一个不是NodePath实例的路径。可能是因为串行化不好。
我遵循教程并按照指示添加了包，我的代码如下：
import Vue from 'nativescript-vue';
import Vuex from
浏览 0提问于2019-03-29得票数 1
回答已采纳
我创建了一个非常小的应用程序，对于Android，它在加载第一页时显示进入沉浸式模式。我遇到的问题是，app.android.startActivity是未定义的，因此我无法获得装饰窗口来更改系统UI的可见性。如果我通过Chrome进行检查，我可以很容易地访问StartActivity，当我在操场上尝试相同的代码时，它工作得非常完美。
<template>
<Page
class="page page__start"
actionBarHidden="true"
backgroundSpanUnderStatusBar="
浏览 1提问于2018-06-25得票数 1
在reorderMode="Drag"中使用reorderMode="Drag"中的RadListView组件(如
[Vue warn]: Unknown custom element: <ReorderHandle> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
如何根据这个ReorderHandle在Nativescript-vue中使用
任何有关此功能的帮助
浏览 0提问于2019-07-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
