uni-swipe-action-item 滑动点击时报错 isPC is not defined 解决方法

最新推荐文章于 2024-06-07 09:55:26 发布
原创 最新推荐文章于 2024-06-07 09:55:26 发布 · 924 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

博客内容涉及uni-app组件uni-swipe-action-item在非H5平台运行时出现错误的问题。源码逻辑错误导致在非H5环境调用isPC函数时报错。解决方案是删除引入isPC的代码，并将所有涉及到is_PC的判断改为固定为false。此修复将确保组件在所有平台的正确运行。

        该组件的源码逻辑是只有在h5平台才去加载isPC函数，但是在调用的时候不区分平台，所以才会其他平台全部报错。可以在项目路径  /uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpwxs.js”  中把  import {isPC} from "./isPC"  删除，然后把这个文件的所有的  let is_pc = isPC || false  都改成 let is_pc =false 就好了（一共有三个，报错也应该是三个）

Derrrrrd
关注
uni-swipe-action-item点击执行两次bug
object not found的博客
08-26 2万+
首先坑是官方组件版本不一致的问题，组件版本较低，后续官方已经更新修复此bug。
小程序滑动删除功能，使用uni-swipe-action 组件无法实现滑动删除的解决方案
qq_66077007的博客
03-01 1569
问题起因：跟着黑马优购项目制作，发现无法实现滑动删除效果，就去查文档，先前使用的是旧版option属性——:option="options"，发现不起作用，看了官网中的注意事项，才解决了这个问题。 解决方案：使用兼容性更好的语法，将options属性改为right-options
关于uni-swipe-action-item 点击时，在小程序开发工具中报错ReferenceError: isPC is not defined
object not found的博客
08-26 2万+
把“你自己项目路径/uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpwxs.js”个人感觉是官方写组件的时候，源码逻辑只在h5平台才去加载isPC函数，但是在调用的时候不区分平台，所以才会其他平台全部报错。改成：let isPC=function(){return false}；如果要在pc上跑不要这么改。当滑动后点击取消或者删除时在微信小程序报错（h5没问题），如下。......
使用uni-swipe-action-item在微信开发者工具报错：isPC is not defined解决方法
m0_47807991的博客
06-29 1077
使用uni-swipe-action-item在微信开发者工具报错：is PC is not defined解决方法
u-swipe-action报错Error: Not Found：Page[2][-1,20-9；9] at view.umd.min.js:1
qq_42928221的博客
09-11 2785
u-swipe-action报错Error: Not Found：Page[2][-1,20-9;9] at view.umd.min.js:1 使用uview组件u-swipe-action在app上的的报错：(2020-12-2) Error: Not Found：Page[2][-1,20-9;9] at view.umd.min.js:1 注意：使用app上报错的，内容会渲染出来，但是拖动按钮没了。 解决方式： 1. 换个组件，换成uniapp插件市场里的SwipeAction组件
uni-app 小程序 uni-swipe-action组件，点击右侧内容，不自动收缩效果实现
weixin_45559449的博客
07-26 4223
当项目需要开发列表滑选删除功能时，可以借助uni-app 扩展组件 uni-swipe-action实现。将内容区域向左滑动，显示右侧删除按钮；当点击内容区域或右侧删除按钮时，组件都会自动收缩。有时候，点击删除按钮，弹出对话框询问用户是否确认删除，此时删除按钮不需要隐藏。如何实现？
精选资源
uni-swipe-action组件实现列表项左划操作
02-19
应用uni-swipe-action组件实现列表项左划操作。 真正做到开箱即用。
精选资源
uni-app列表项实现左划操作功能
02-25
在上述代码中，`uni-list-item`是列表项，`uni-swipe-cell`是滑动单元，它包裹了`left`和`content`两个插槽。`left`插槽用于放置左滑显示的操作按钮，`content`插槽则用于显示列表项的主要内容。 接下来，我们需要...
react-native-swipe手势：reactive-native的4向滑动手势
02-05
npm i -S react-native-swipe-gestures 用法 'use strict' ; import React , { Component } from 'react' ; import { View , Text } from 'react-native' ; import GestureRecognizer , { swipeDirections } from '...
uniapp组件-uni-swipe-action滑动操作
热门推荐
03-04 2万+
目录 一、基本用法 二、使用变量控制SwipeAction的开启状态 三、swipe-action 列表 官方示例：https://ext.dcloud.net.cn/plugin?id=181 禁止左右滑动，只需要在uni-swipe-action-item组件的属性上添加:disabled="true"即可 一、基本用法 1、直接使用组件 <template> <view> <uni-swipe-action> <uni-...
向左滑动删除列表，动态添加列表
12-01
插件描述：向左滑动删除列表，动态添加列表。 参考示例：http://www.jq22.com/jquery-info4903
小程序uni-swiper-action-item滑动不了
weixin_68854196的博客
02-03 1210
要在options前面加上right或left。
uView里 SwipeAction 滑动操作组件 BUG处理
tcwzy1314的博客
05-07 1076
原因： this.$uGetRect()这个方法是获取的元素节点信息的 有时候节点还未渲染完成 获取不到当前元素的节点信息导致的问题。在官网的群里问 说配置的数据有问题 并没有发现配置的地方有问题 最后改了下源码得以解决。有时候打开这个后会全部展开并且报错,并不是每次都会报错.如果以上有不正确的地方欢迎指正.ヾ(◍°∇°◍)ﾉﾞ。1、先找到滑动组件的文件 这是我滑动组件的路径。3、添加一个延时得已解决此问题。
记一次uni-swipe-action中autoClose、closeAll、resize方法不生效问题
weixin_62192841的博客
07-19 1825
uni-swipe-action扩展组件的closeAll方法
uni-app uni-swipe-action组件 使用插槽渲染按钮，IOS上点击按钮，操作错位
wennuanYU的博客
08-17 4752
uni-app uni-swipe-action组件 使用插槽渲染按钮，IOS上操作错位
uni-app uni-swipe-action 滑动操作状态恢复
paradoxaaa_的博客
06-07 1476
首先，配置一下:show="isOpened[item.id]" @change="change(index)"注意：isOpened一定要定位到你当前点击的内容，我这里是用id区分的， 不然会出现所有列表都同步滑开或者关闭。这样就可以实现及时恢复滑动状态。
uniapp列表滑动操作（删除、编辑）
m0_58361435的博客
03-06 2432
本篇文章结合了下拉刷新、上拉加载，以及每一条列表的左滑删除，这里的header和footer盒子样式我就不写了，光写了main。是上中下布局，中间是内容，废话不说了，直接上代码！
uni-app SwipeAction 滑动操作 使用方法
单飞吧的博客
01-13 6905
在 uni-app 插件市场 可直接点击 使用 HBuilder X 导入插件 HBuilderX 2.5.5起支持 easycom 组件模式。在使用 uni-ui 的时候，只要uni-ui 组件 安装在项目的 components 目录下,并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用 uni-ui 组件 所有不需要使用 import 导入插件可以直接使用 基础用法如下所示 <!-- 基础用法 --> <uni-swipe-a
uniapp——项目day04
测试
11-13 1135
uniapp项目day04
文件查找失败：'@/components/uni-swipe-action-item/uni-swipe-action-item.vue' 报错解决方法
最新发布
09-18
<think> 我们遇到的问题是在使用uni-swipe-action组件时，控制台报错文件查找失败：'@/components/uni-swipe-action-item/uni-swipe-action-item.vue' 根据引用[1]和引用[2]提供的信息，以及我们之前的讨论，这个问题通常与组件的引入方式有关。 在uni-app中，使用easycom自动引入组件时，如果组件路径配置不正确或者node_modules下的组件没有被正确编译，就会出现此类问题。 解决步骤： 1. **检查组件安装方式**： 引用[2]提到，如果是从插件市场直接下载到HBuilderX中，那么组件的路径可能不在node_modules下，而是放在项目根目录的components目录下。因此，我们需要确认组件的实际位置。 2. **配置vue.config.js**（针对cli项目）： 引用[1]指出，cli项目默认不编译node_modules下的组件，需要手动配置vue.config.js。 在项目根目录创建或修改vue.config.js文件，添加如下配置： ```javascript module.exports = { transpileDependencies: ['@dcloudio/uni-ui'] // 添加需要编译的依赖 } ``` 3. **检查easycom配置**： 在pages.json中，确保easycom配置正确。默认配置如下： ```json "easycom": { "autoscan": true, "custom": { "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" } } ``` 注意：如果组件是直接下载到components目录，而不是通过npm安装在node_modules下，那么我们需要修改custom的路径为： ```json "custom": { "^uni-(.*)": "@/components/uni-$1/uni-$1.vue" } ``` 4. **检查文件路径**： 根据报错信息，它试图在`@/components/uni-swipe-action-item/uni-swipe-action-item.vue`路径下查找组件。 因此，我们需要确保项目中的components目录下确实有`uni-swipe-action-item`目录，并且该目录内有`uni-swipe-action-item.vue`文件。 5. **重新安装组件**： 如果以上步骤都无法解决，可以尝试重新安装组件。 - 如果是通过npm安装，执行： ```bash npm install @dcloudio/uni-ui ``` - 如果是通过插件市场安装，请确保将组件导入到项目components目录下（在HBuilderX中右键选择导入组件）。 6. **重启开发服务器**： 修改配置后，重新运行项目。 总结：根据引用[1][^1]和引用[2][^2]，我们主要从组件安装位置、编译配置和easycom路径配置三个方面解决该问题。 如果按照上述步骤操作后仍然报错，请检查项目目录结构，确保组件文件存在。 §§相关问题§§ 1. 如何配置vue.config.js以编译node_modules下的uni-ui组件？ 2. uni-app中如何正确配置easycom自动引入组件？ 3. 从uni-app插件市场下载的组件应该放在哪个目录？ </think> ### 解决 `@/components/uni-swipe-action-item/uni-swipe-action-item.vue` 文件查找失败的方法 该报错表明 uni-app 无法找到组件文件路径，通常由以下原因导致： #### 1. **Easycom 配置错误**（最常见） ```json{4-6} // 修改 pages.json 中的 easycom 配置 "easycom": { "custom": { // 修正路径格式，移除多余的 components 层级 "^uni-(.*)": "@/uni-$1/uni-$1.vue" // 或使用 npm 安装的路径 // "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" } } ``` **原因分析**： 默认配置 `"^uni-(.*)": "@/components/uni-$1/uni-$1.vue"` 要求组件必须位于 `/components/uni-xxx/` 目录下。但实际插件安装位置可能是： - `/uni-components/`（通过插件市场安装） - `node_modules/@dcloudio/uni-ui`（通过 npm 安装） **解决方案**： - 检查项目根目录的实际组件路径 - 根据组件真实位置修改 `pages.json` 中的路径 #### 2. **Node_modules 编译配置缺失**（CLI 项目专属） ```javascript{3} // 在项目根目录创建 vue.config.js module.exports = { transpileDependencies: ['@dcloudio/uni-ui'] // 添加这行 } ``` **适用场景**： 使用 `vue-cli` 创建的 uni-app 项目（非 HBuilderX 创建）[^1] **原理**： CLI 项目默认不编译 node_modules 中的组件，需手动添加编译配置 #### 3. **组件安装位置错误** ```bash # 通过 npm 安装（推荐） npm install @dcloudio/uni-ui # 通过 HBuilderX 插件市场安装步骤： 1. 右键点击项目根目录的 "components" 文件夹 2. 选择 "从插件市场导入" 3. 搜索 "uni-swipe-action" 并安装 ``` **注意事项**： - 插件市场安装后会自动放入 `/components/uni-components/` 目录 - 手动下载的 ZIP 包需解压到正确目录 #### 4. **路径大小写敏感问题** ```diff // 检查路径大小写一致性 - "@/components/uni-SWIPE-action-item/uni-swipe-action-item.vue" + "@/components/uni-swipe-action-item/uni-swipe-action-item.vue" ``` **适用场景**： 部署到 Linux 服务器或 Git 仓库时，文件系统可能区分大小写 #### 5. **组件文件缺失验证** 检查项目目录是否存在以下文件： `项目根目录/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item.vue` 若不存在，需重新安装组件 ### 操作流程图 ```mermaid graph TD A[文件查找失败] --> B{检查组件安装方式} B -->|npm安装| C[确认vue.config.js配置] B -->|插件市场安装| D[检查pages.json路径] C --> E[添加transpileDependencies] D --> F[修正easycom自定义路径] E & F --> G[重启开发服务器] G --> H{是否解决} H -->|是| I[完成] H -->|否| J[检查文件大小写] ``` > **重要提示**：修改配置后必须**重启开发服务器**（HBuilderX 需重新运行项目）
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值