关于uni-app中uni-swipe-action-item组件动态加载的问题

发布于 1周前 作者 yibo5220 来自 Uni-App

关于uni-app中uni-swipe-action-item组件动态加载的问题

正常的v-for去渲染是没有问题比如我定义一个数组，然后for循环是没有问题，可以滑动可以点击，但是，当我在其他页面去修改这个数组，增加记录的时候，多出来的那个数组是没办法滑动的，只能滑动一开始页面渲染的那几个item，多出来的item是没有滑动效果的。这个不懂如何解决

Harmonyos Next教程
6 回复

楼主解决了吗


我们基于swipe做过仿抖音的东西，但是效果不是特别好，可以尝试解决，联系微信：zhimitec 专业的uniapp插件/项目外包团队为您服务， 可签订合同、提供发票，售后无忧

我也碰到了 请问问题解决了吗

楼主，问题解决了吗？也遇到这个问题了

刚也遇到了这个问题，去查了下u-swipe-action组件的代码， 具体是因为： 你不在u-swipe-action所在页面，修改了数组后，u-swipe-action组件会调用mounted（）， 进而调用getActionRect（），这个时候页面获取不到组件宽度，res.width = 0, 这时movableViewWidth 就始终等于滑块按钮的宽度btnWidth， 所以不能滑动 mounted() { this.getActionRect(); }, getActionRect() { this.$uGetRect(’.u-swipe-action’).then(res => { this.movableAreaWidth = res.width; // 等视图更新完后，再显示右边的可滑动按钮，防止这些按钮会"闪一下" this.$nextTick(() => { this.showBtn = true; }) }); },
解决方法： 在自己工程中，找到这个组件，然后给它添加一个activated（），让组件每次加载都重新获取宽度就可以了 activated() { this.getActionRect(); },
但是不知道对组件会产生什么影响，我暂时没找到其它方法，有大佬知道正确解决方法请指正

在uni-app中使用uni-swipe-action-item组件进行动态加载时，主要涉及到如何在数据变化时正确渲染和操作这些组件。以下是一个简化的代码示例，展示了如何实现这一功能。

首先，确保你的项目中已经安装了uni-app的相关依赖，并且已经创建了一个基本的页面结构。

1. 页面模板 (template)

在页面的<template>部分，使用v-for指令来动态渲染uni-swipe-action-item组件。这里假设我们有一个名为items的数据数组，每个元素代表一个可滑动的项。

<template>
  <view>
    <uni-swipe-action @change="handleSwipeChange">
      <uni-swipe-action-item v-for="(item, index) in items" :key="index">
        <view class="swipe-item">{{ item.name }}</view>
        <view class="swipe-buttons">
          <button @click="handleButtonClick(index, 'edit')">Edit</button>
          <button @click="handleButtonClick(index, 'delete')">Delete</button>
        </view>
      </uni-swipe-action-item>
    </uni-swipe-action>
    <button @click="addItem">Add Item</button>
  </view>
</template>

2. 脚本部分 (script)

在<script>部分，定义items数组以及相关的操作方法。

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ],
    };
  },
  methods: {
    handleSwipeChange(e) {
      console.log('Swipe changed:', e);
    },
    handleButtonClick(index, action) {
      console.log(`Action ${action} on item ${index}`);
      if (action === 'delete') {
        this.items.splice(index, 1);
      }
    },
    addItem() {
      const newItem = {
        id: this.items.length + 1,
        name: `Item ${this.items.length + 1}`,
      };
      this.items.push(newItem);
    },
  },
};
</script>

3. 样式部分 (style)

你可以根据需要自定义样式，这里仅提供一个简单的示例。

<style scoped>
.swipe-item {
  padding: 20px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
.swipe-buttons {
  display: flex;
  justify-content: space-around;
}
button {
  padding: 10px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
}
</style>

以上代码示例展示了如何在uni-app中使用uni-swipe-action-item组件进行动态加载和操作。通过监听按钮点击事件来修改items数组，实现数据的动态更新和组件的重新渲染。你可以根据自己的需求进一步扩展和自定义这些功能。

回到顶部