【uniapp】uniapp开发小程序定制uni-collapse（折叠面板）

<template>
  <view class="uni-collapse">
    <view v-for="(item, index) in dataList" :key="index" class="uni-collapse-item">
      <view class="uni-collapse-item__title" @click="switchShow(index)">
        {{ item.title }}
        <view class="uni-collapse-item__title-arrow" :class="{ 'uni-active': item.isShow }">
          <uni-icons type="arrow-right" size="10"></uni-icons>
        </view>
      </view>
      <view v-if="item.isShow" class="uni-collapse-item__content">
        {{ item.content }}
      </view>
    </view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        dataList: [
          { title: '折叠面板1', content: '这是折叠面板的内容1', isShow: false },
          { title: '折叠面板2', content: '这是折叠面板的内容2', isShow: false },
          { title: '折叠面板3', content: '这是折叠面板的内容3', isShow: false }
        ]
      };
    },
    methods: {
      switchShow(index) {
        const currentItem = this.dataList[index];
        currentItem.isShow = !currentItem.isShow;
        this.$set(this.dataList, index, currentItem); // 强制更新数组
      }
    }
  };
</script>
 
<style scoped>
  .uni-collapse {
    color: #333;
  }
  .uni-collapse-item__title {
    padding: 10px;
    position: relative;
    cursor: pointer;
  }
  .uni-collapse-item__title-arrow {
    position: absolute;
    right: 10px;
    transition: transform 0.3s;
  }
  .uni-collapse-item__title-arrow.uni-active {
    transform: rotate(90deg);
  }
  .uni-collapse-item__content {
    padding: 10px;
    border-top: 1px solid #eee;
  }
</style>

这段代码实现了一个简单的折叠面板功能，每个面板的状态存储在其对应数据对象的isShow属性中。点击标题时，会切换对应面板的展开/折叠状态。通过使用v-for指令遍历数据列表，并使用v-if指令根据isShow的值决定内容是否显示。同时，使用了uni-icons组件来显示箭头图标，通过CSS类uni-active来控制箭头的方向。这个例子展示了如何在uni-app中使用Vue的基本语法和指令来构建动态的用户界面。