uni-app 仿支付宝基金拖拽列表排序功能，支持全选置顶，编辑后的列表可保存

uni-app 仿支付宝基金拖拽列表排序功能，支持全选置顶，编辑后的列表可保存

1 回复

更多关于uni-app 仿支付宝基金拖拽列表排序功能，支持全选置顶，编辑后的列表可保存的实战教程也可以访问 https://www.itying.com/category-93-b0.html


要实现uni-app中仿支付宝基金拖拽列表排序功能并支持全选置顶以及保存编辑后的列表，你可以使用以下步骤和代码案例。这里主要用到sortablejs库来实现拖拽排序功能，并结合uni-app的数据绑定和API保存列表。

1. 安装sortablejs

首先，在你的uni-app项目中安装sortablejs库。你可以通过npm或yarn安装，但在uni-app中更常见的是直接引入CDN或使用小程序兼容的版本。这里假设你使用CDN引入。

<!-- 在页面的<head>标签内引入sortable.min.js -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

2. 页面布局

创建一个包含基金列表的页面布局，并使用v-for指令渲染列表。

<template>
  <view>
    <checkbox-group @change="handleCheckboxChange">
      <label v-for="(item, index) in fundList" :key="item.id">
        <checkbox :value="item.id">{{ item.name }}</checkbox>
      </label>
    </checkbox-group>
    <button @click="selectAllTop">全选置顶</button>
    <view id="sortable-list">
      <view v-for="(item, index) in fundList" :key="item.id" class="list-item">
        {{ item.name }}
      </view>
    </view>
    <button @click="saveList">保存</button>
  </view>
</template>

3. 实现拖拽排序和全选置顶

在页面的mounted生命周期中初始化sortable实例，并处理全选置顶逻辑。

export default {
  data() {
    return {
      fundList: [
        // 示例基金列表
      ],
      selectedIds: []
    };
  },
  mounted() {
    const el = document.getElementById('sortable-list');
    Sortable.create(el, {
      onEnd: (evt) => {
        const movedItem = this.fundList.splice(evt.oldIndex, 1)[0];
        this.fundList.splice(evt.newIndex, 0, movedItem);
      }
    });
  },
  methods: {
    handleCheckboxChange(e) {
      this.selectedIds = e.detail.value;
    },
    selectAllTop() {
      const selectedItems = this.selectedIds.map(id => this.fundList.find(item => item.id === id));
      this.fundList = [...selectedItems, ...this.fundList.filter(item => !this.selectedIds.includes(item.id))];
    },
    saveList() {
      // 保存逻辑，比如发送到服务器或存储到本地
      console.log('保存列表:', this.fundList);
      // 示例：使用uni.setStorageSync保存列表
      uni.setStorageSync('fundList', this.fundList);
    }
  }
};

4. 样式

添加一些基本的样式以确保列表项可见并可拖拽。

<style>
.list-item {
  padding: 10px;
  margin: 5px 0;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  cursor: move;
}
</style>

以上代码提供了一个基本的框架，实现了拖拽排序、全选置顶以及保存列表的功能。你可以根据实际需求进一步调整和优化。

回到顶部