问题:
最近用uni-app开发微信小程序,用到了uni-swipe-action扩展组件,但是用uni-swipe-action-item的属性autoClose时,怎么也不生效,又试了uni-swipe-action的closeAll方法、resize方法,都是不生效,绑定的ref也能拿到,但就是调方法没反应。
找原因:
找了一通,插件的issue里面也没有提到这个问题的,就很纳闷,后来,通过对比插件源码和自己建的项目中src/uni_modules/uni-swipe-action/components才发现,可能是之前下载uni-ui的时候,下载的uni-swipe-action插件里面,不包括uni-swipe-action-item,所以对应有关的内容无效。
解决:
去插件市场,重新下载了插件(uni-swipe-action 滑动操作 - DCloud 插件市场),再重新启动项目,就好了,closeAll方法是有效的,autoClose属性也生效了。
具体使用方法可参考官网(uni-app官网),以防用错,我的代码稍微贴一下吧:
<template>
<button @click="closeAllItem">关闭所有</button>
<uni-swipe-action ref="swipeRef">
<uni-swipe-action-item
v-for="item in listData"
:key="item.id"
:right-options="options"
@click="delItem(item.modelId)"
>
<FavorItem :item="item"></FavorItem>
</uni-swipe-action-item>
</uni-swipe-action>
</template>
<script lang="ts" setup>
const swipeRef = ref<any>(null);
const closeAllItem = ()=> {
swipeRef.value.closeAll()
}
</script>
希望如果是相同原因的小伙伴少花点时间,有问题也可以随时和我讨论哦~