uni-app 使用uni-swipe-action和uni-swipe-action-item组件点击侧滑按钮后报错

uni-app 使用uni-swipe-action和uni-swipe-action-item组件点击侧滑按钮后报错

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win7
HBuilderX类型 正式
HBuilderX版本号 3.1.4
手机系统 Android
手机系统版本号 Android 10
手机厂商 华为
手机机型 荣耀V30PRO
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<view class="uni-list">  
    <block v-for="(value, index) in listData" :key="index">  
        <uni-swipe-action>  
            <uni-swipe-action-item :right-options="swipeOptions"   
                :auto-close="true"  @click="swipeAction">  
                <view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">  
                    <view class="uni-media-list">  
                        <!-- <image class="uni-media-list-logo" :src="value.cover"></image> -->  
                        <view class="uni-media-list-body">  
                            <view class="uni-media-list-text-top">{{(index+1)}}、{{ value.orderNo }}</view>  
                            <view class="uni-media-list-text-bottom">  
                                <text class="recvname">{{ value.recvName }}</text>  
                                <!-- <text>{{ value.published_at }}</text> -->  
                            </view>  
                        </view>  
                    </view>  
                </view>  
            </uni-swipe-action-item>  
        </uni-swipe-action>  
    </block>  
</view>  

swipeOptions: [{  
        text: '删除',  
        style: {  
            backgroundColor: '#dd524d'  
        }  
}]

操作步骤：

无

预期结果：

无

实际结果：

无

bug描述：

使用uni-swipe-action和uni-swipe-action-item组件时，手机端调试功能正常，但是点击侧滑按钮后报错，信息如下： 望尽快解决。

15:14:51.485 [Vue warn]: Property or method "onClickForPC" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.  
15:14:51.525 found in  
15:14:51.565 ---> <UniSwipeActionItem> at components/uni-swipe-action-item/uni-swipe-action-item.vue:1  
15:14:51.585         <UniSwipeAction> at components/uni-swipe-action/uni-swipe-action.vue:1  
15:14:51.605              at pages/bus/zxck/zxck.vue:1  
15:14:51.625 [Vue warn]: Error in v-on handler: "TypeError: _vm.onClickForPC is not a function"  
15:14:51.665 found in  
15:14:51.705 ---> <UniSwipeActionItem> at components/uni-swipe-action-item/uni-swipe-action-item.vue:1  
15:14:51.725         <UniSwipeAction> at components/uni-swipe-action/uni-swipe-action.vue:1  
15:14:51.745              at pages/bus/zxck/zxck.vue:1  
15:14:51.765 TypeError: _vm.onClickForPC is not a function

更多关于uni-app 使用uni-swipe-action和uni-swipe-action-item组件点击侧滑按钮后报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

onClickForPC报错问题的解决办法： 将 uni-modules/uni-swipe-action/uni-swipe-action-item/mpwxs.js 中的 onClickForPC 方法 // #ifdef H5 改为 // #ifdef APP-VUE|| MP-WEIXIN||H5

更多关于uni-app 使用uni-swipe-action和uni-swipe-action-item组件点击侧滑按钮后报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


貌似没有用啊

根据报错信息，问题出现在组件内部引用了未定义的 onClickForPC 方法。这是 uni-swipe-action 组件在 PC 端适配时的一个兼容性问题。

解决方案：

  1. 检查组件版本：确保使用的是最新版本的 uni-swipe-action 组件。旧版本可能存在此兼容性问题。

  2. 临时修复方法：在页面中声明一个空的 onClickForPC 方法：

methods: {
  swipeAction(e) {
    // 你的侧滑按钮点击逻辑
  },
  onClickForPC() {
    // 这是一个空方法，用于解决PC端兼容性问题
  }
}
回到顶部