vue3实现箭头图片展开，收缩效果，打开关闭效果。图片旋转。uni-app,微信小程序，展开关闭，模板。

724人阅读 2022/11/6 16:59 总访问：4720019 评论：0 收藏：0 手机

分类: 前端

如图，主要是说一下右边那个箭头的展开，收缩的效果
![](https://img.tnblog.net/arcimg/aojiancc2/b1dbb07dbdbd45adae3cc4c3deb7b266.png)

其实非常的简单，当打开的时候那个图片旋转个180°即可，所以单独搞一个打开状态的样式：
```
// 图片的常态样式
.icon-arrow {
    width: 20rpx;
    height: 12rpx;
}

// 展开的效果图标旋转180°
.icon-arrow-open{
    rotate:180deg
}
```
**然后绑定图片的时候,给一个是否增加icon-arrow-open样式的验证就行了，代码如下**
```
<image :src="`${CssImgPath}/imgs/arrow_mini.png`" :class="{'icon-arrow-open':item.isOpen}" class="icon-arrow" />
```
核心代码就是：
```
:class="{'icon-arrow-open':item.isOpen}"
```
这里就是根据循环项里边的isOpen来确定图片是否存在 icon-arrow-open样式,如果存在就是让图片旋转180°，就变成展开状态的效果了。

#### 贴一下这个页面完整的代码
全部都是静态页，是用vscode开发的uni-app，编译到微信小程序运行的,像数单位使用的是rpx
```
<template>
    <div class="schoolSort-container">
        <view class="titleWrap">
            <view class="title">{{ state.title }}</view>
        </view>
        <view class="splitline"></view>

        <view class="schoolSortContent">
            <view v-for="(item, index) in state.schoolData" :key="index">
                <view class="schoolSortWrap" @tap="openContent(item)">
                    <view class="schoolSortItem">
                        <view class="ssi-sort-name">
                            <view v-if="index <= 2">
                                <image class="sort_img" :src="`${CssImgPath}/imgs/sort_${index + 1}.png`" />
                            </view>
                            <view class="ssi-sort" v-else>{{ index + 1 }}</view>
                            <view class="ssi-name">陕西商洛职业技术学院</view>
                        </view>
                        <view class="ssi-complete-info-arrow">
                            <view class="ssi-complete-info">目标达成：{{ (100 - index) }}%</view>
                            <image :src="`${CssImgPath}/imgs/arrow_mini.png`" :class="{'icon-arrow-open':item.isOpen}" class="icon-arrow" />
                        </view>
                    </view>
                    <view v-show="item.isOpen" class="ssc-situation">
                        <view class="ssc-si-warp">
                            <view class="sss-ps-item">
                                <div class="sss-ps-item-wrap">
                                    <view class="sss-psi-count">19</view>
                                    <view class="sss-psi-desc">目标</view>
                                </div>
                            </view>

                            <view class="sss-ps-item">
                                <div class="sss-ps-item-wrap">
                                    <view class="sss-psi-count">{{ index }}</view>
                                    <view class="sss-psi-desc">实际完成率</view>
                                </div>
                            </view>

                            <view class="sss-ps-item">
                                <div class="sss-ps-item-wrap">
                                    <view class="sss-psi-count">3</view>
                                    <view class="sss-psi-desc">目标达成率</view>
                                </div>
                            </view>
                        </view>
                    </view>
                </view>

            </view>
        </view>

    </div>
</template>

<script setup lang="ts" name="tasks">
import { CssImgPath } from '@/common/sysconfig';
import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue';

const state = reactive({
    title: 'TNBLOG-2024上系统使用排名',
    schoolData: []
})


onMounted(() => {

    // 模拟一点数据
    for (let index = 0; index < 10; index++) {
        if (index === 0) {
            state.schoolData.push({ sort: index, isOpen: true })
        }
        else {
            state.schoolData.push({ sort: index, isOpen: false })
        }
    }

})

const openContent = (item: any) => {
    console.log("点击了")
    item.isOpen = !item.isOpen
}



</script>

<style scoped="scoped" lang="scss">
.schoolSort-container {
    padding: 30rpx;

    // 图片的常态样式
    .icon-arrow {
        width: 20rpx;
        height: 12rpx;
    }

    // 展开的效果图标旋转180°
    .icon-arrow-open{
        rotate:180deg
    }

    .titleWrap {
        display: flex;

        .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 36rpx;
            color: #313960;
        }
    }

    .splitline {
        margin-left: -20rpx;
        margin-right: -20rpx;
        margin-top: 30rpx;
        height: 1rpx;
        background: #f3f3f3;
    }

    .schoolSortWrap {
        // margin-top: 20rpx;
        min-height: 90rpx;
        // margin-bottom: 20rpx;
        align-items: center;
        border-bottom: 2rpx solid #CBD2DA;
        border-bottom-color: rgba(203, 210, 218, 0.2);
        //border-bottom-color: rgba(16, 13, 112, 0.7);


        .ssc-situation {
            background: RGBA(248, 249, 250, 1);
            padding: 20rpx;

            .ssc-si-warp {
                margin-top: 5rpx;
                display: flex;

                // 让中间间距保持一致
                .sss-ps-item+.sss-ps-item {
                    margin-left: 12rpx;
                }

                .sss-ps-item {
                    flex: 1;
                    height: 102rpx;
                    background: rgba(179, 179, 179, 0.1);
                    border-radius: 8rpx 8rpx 8rpx 8rpx;
                    text-align: center;
                    display: flex;
                    justify-content: center;

                    .sss-ps-item-wrap {
                        align-self: center;

                        .sss-psi-count {
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #5EC6A7;
                        }

                        .sss-psi-desc {
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #B3B3B3;
                            margin-top: 5rpx;
                        }
                    }
                }
            }
        }

    }

    .schoolSortItem {
        min-height: 90rpx;
        // background-color: #ffabcd;
        // border-bottom: 2rpx solid #CBD2DA;
        // border-bottom-color: rgba(203, 210, 218, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;

        .ssi-sort-name {
            display: flex;
            align-items: center;

            .sort_img {
                width: 43rpx;
                height: 52.13rpx;
                padding-top: 10rpx;
                // width: 36rpx;
                // height: 47.14rpx;
            }

            .ssi-sort {
                text-align: center;
                width: 43rpx;
            }

            .ssi-name {
                margin-left: 50rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #313960;
            }
        }


        .ssi-complete-info-arrow {
            display: flex;
            align-items: center;

            .ssi-complete-info {
                width: 210rpx;
                height: 37rpx;
                background: rgba(94, 205, 182, 0.1);
                border-radius: 8rpx 8rpx 8rpx 8rpx;
                text-align: center;

                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #5EC6A7;
                margin-right: 15rpx;
            }
        }

    }
}
</style>
```

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

vue3实现箭头图片展开，收缩效果，打开关闭效果。图片旋转。uni-app,微信小程序，展开关闭，模板。

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}

vue3实现箭头图片展开，收缩效果，打开关闭效果。图片旋转。uni-app,微信小程序，展开关闭 ，模板。

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}

vue3实现箭头图片展开，收缩效果，打开关闭效果。图片旋转。uni-app,微信小程序，展开关闭，模板。