TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
应无所住,而生其心
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
16篇
微服务
41篇
Git
15篇
.NET
104篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
90篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
160篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
vue3实现箭头图片展开,收缩效果,打开关闭效果。图片旋转。uni-app,微信小程序,展开关闭 ,模板。
343
人阅读
2022/11/6 16:59
总访问:
4428325
评论:
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}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}