使用uni-swipe-action-item在微信开发者工具报错:isPC is not defined解决方法

在使用uni-swipe-action-item组件时 根据官方文档给出的uni-swipe-action-item组件的基础用法:

<!-- 基础用法 -->
<uni-swipe-action-item :right-options="options" @click="onClick">
    <view>SwipeAction 基础使用场景</view>
</uni-swipe-action-item>
export default {
  data(){
    return {
      options:[{
            text: '删除',
            style: {
                backgroundColor: '#E50012'
            }
        }]
    }
  },
  methods:{
    onClick(){
      console.log('ok')
    }
  }
}

在这种情况下调用onClick函数可能会出现is PC is not defined的报错

其原因根据查询可以得知是因为uni-swipe-action-item组件中的isPC.js文件中的isPC函数只有在H5平台才会加载,在其他平台运行会出错。

这里可以通过修改组件的源码来解决,但是一般不推荐。

在uni-app官方文档中还推荐了uni-swipe-action-item的插槽用法:

<!-- 使用插槽 (请自行给定插槽内容宽度)-->
<uni-swipe-action-item>
	<view>
		<text >使用插槽</text>
    </view>
	<template v-slot:right>
		<view class="slot-button" @click="onClick">
            <text class="slot-button-text">删除</text>
        </view>
	</template>
</uni-swipe-action-item>

 可以在插槽中绑定click事件,然后改变样式就能解决。

.slot-button {
  background-color: #E50012;
  display: flex;
  width: 150rpx;
  justify-content: center;
  align-items: center;
    .slot-button-text {  
      color: #ddd;  
      font-size: 14px;  
    }
  }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值