收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

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

1216人阅读 2022/11/6 16:59 总访问：5182769 评论：0 收藏：0 手机
分类: 前端

如图，主要是说一下右边那个箭头的展开，收缩的效果

其实非常的简单，当打开的时候那个图片旋转个180°即可，所以单独搞一个打开状态的样式：

  1. // 图片的常态样式
  2. .icon-arrow {
  3.     width: 20rpx;
  4.     height: 12rpx;
  5. }
  7. // 展开的效果图标旋转180°
  8. .icon-arrow-open{
  9.     rotate:180deg
  10. }

然后绑定图片的时候,给一个是否增加icon-arrow-open样式的验证就行了，代码如下

  1. <image :src="`${CssImgPath}/imgs/arrow_mini.png`" :class="{'icon-arrow-open':item.isOpen}" class="icon-arrow" />

核心代码就是：

  1. :class="{'icon-arrow-open':item.isOpen}"

这里就是根据循环项里边的isOpen来确定图片是否存在 icon-arrow-open样式,如果存在就是让图片旋转180°，就变成展开状态的效果了。

贴一下这个页面完整的代码

全部都是静态页，是用vscode开发的uni-app，编译到微信小程序运行的,像数单位使用的是rpx

  1. <template>
  2.     <div class="schoolSort-container">
  3.         <view class="titleWrap">
  4.             <view class="title">{{ state.title }}</view>
  5.         </view>
  6.         <view class="splitline"></view>
  8.         <view class="schoolSortContent">
  9.             <view v-for="(item, index) in state.schoolData" :key="index">
  10.                 <view class="schoolSortWrap" @tap="openContent(item)">
  11.                     <view class="schoolSortItem">
  12.                         <view class="ssi-sort-name">
  13.                             <view v-if="index <= 2">
  14.                                 <image class="sort_img" :src="`${CssImgPath}/imgs/sort_${index + 1}.png`" />
  15.                             </view>
  16.                             <view class="ssi-sort" v-else>{{ index + 1 }}</view>
  17.                             <view class="ssi-name">陕西商洛职业技术学院</view>
  18.                         </view>
  19.                         <view class="ssi-complete-info-arrow">
  20.                             <view class="ssi-complete-info">目标达成：{{ (100 - index) }}%</view>
  21.                             <image :src="`${CssImgPath}/imgs/arrow_mini.png`" :class="{'icon-arrow-open':item.isOpen}" class="icon-arrow" />
  22.                         </view>
  23.                     </view>
  24.                     <view v-show="item.isOpen" class="ssc-situation">
  25.                         <view class="ssc-si-warp">
  26.                             <view class="sss-ps-item">
  27.                                 <div class="sss-ps-item-wrap">
  28.                                     <view class="sss-psi-count">19</view>
  29.                                     <view class="sss-psi-desc">目标</view>
  30.                                 </div>
  31.                             </view>
  33.                             <view class="sss-ps-item">
  34.                                 <div class="sss-ps-item-wrap">
  35.                                     <view class="sss-psi-count">{{ index }}</view>
  36.                                     <view class="sss-psi-desc">实际完成率</view>
  37.                                 </div>
  38.                             </view>
  40.                             <view class="sss-ps-item">
  41.                                 <div class="sss-ps-item-wrap">
  42.                                     <view class="sss-psi-count">3</view>
  43.                                     <view class="sss-psi-desc">目标达成率</view>
  44.                                 </div>
  45.                             </view>
  46.                         </view>
  47.                     </view>
  48.                 </view>
  50.             </view>
  51.         </view>
  53.     </div>
  54. </template>
  56. <script setup lang="ts" name="tasks">
  57. import { CssImgPath } from '@/common/sysconfig';
  58. import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue';
  60. const state = reactive({
  61.     title: 'TNBLOG-2024上系统使用排名',
  62.     schoolData: []
  63. })
  66. onMounted(() => {
  68.     // 模拟一点数据
  69.     for (let index = 0; index < 10; index++) {
  70.         if (index === 0) {
  71.             state.schoolData.push({ sort: index, isOpen: true })
  72.         }
  73.         else {
  74.             state.schoolData.push({ sort: index, isOpen: false })
  75.         }
  76.     }
  78. })
  80. const openContent = (item: any) => {
  81.     console.log("点击了")
  82.     item.isOpen = !item.isOpen
  83. }
  87. </script>
  89. <style scoped="scoped" lang="scss">
  90. .schoolSort-container {
  91.     padding: 30rpx;
  93.     // 图片的常态样式
  94.     .icon-arrow {
  95.         width: 20rpx;
  96.         height: 12rpx;
  97.     }
  99.     // 展开的效果图标旋转180°
  100.     .icon-arrow-open{
  101.         rotate:180deg
  102.     }
  104.     .titleWrap {
  105.         display: flex;
  107.         .title {
  108.             font-family: PingFang SC, PingFang SC;
  109.             font-weight: 500;
  110.             font-size: 36rpx;
  111.             color: #313960;
  112.         }
  113.     }
  115.     .splitline {
  116.         margin-left: -20rpx;
  117.         margin-right: -20rpx;
  118.         margin-top: 30rpx;
  119.         height: 1rpx;
  120.         background: #f3f3f3;
  121.     }
  123.     .schoolSortWrap {
  124.         // margin-top: 20rpx;
  125.         min-height: 90rpx;
  126.         // margin-bottom: 20rpx;
  127.         align-items: center;
  128.         border-bottom: 2rpx solid #CBD2DA;
  129.         border-bottom-color: rgba(203, 210, 218, 0.2);
  130.         //border-bottom-color: rgba(16, 13, 112, 0.7);
  133.         .ssc-situation {
  134.             background: RGBA(248, 249, 250, 1);
  135.             padding: 20rpx;
  137.             .ssc-si-warp {
  138.                 margin-top: 5rpx;
  139.                 display: flex;
  141.                 // 让中间间距保持一致
  142.                 .sss-ps-item+.sss-ps-item {
  143.                     margin-left: 12rpx;
  144.                 }
  146.                 .sss-ps-item {
  147.                     flex: 1;
  148.                     height: 102rpx;
  149.                     background: rgba(179, 179, 179, 0.1);
  150.                     border-radius: 8rpx 8rpx 8rpx 8rpx;
  151.                     text-align: center;
  152.                     display: flex;
  153.                     justify-content: center;
  155.                     .sss-ps-item-wrap {
  156.                         align-self: center;
  158.                         .sss-psi-count {
  159.                             font-family: PingFang SC, PingFang SC;
  160.                             font-weight: 400;
  161.                             font-size: 24rpx;
  162.                             color: #5EC6A7;
  163.                         }
  165.                         .sss-psi-desc {
  166.                             font-family: PingFang SC, PingFang SC;
  167.                             font-weight: 400;
  168.                             font-size: 24rpx;
  169.                             color: #B3B3B3;
  170.                             margin-top: 5rpx;
  171.                         }
  172.                     }
  173.                 }
  174.             }
  175.         }
  177.     }
  179.     .schoolSortItem {
  180.         min-height: 90rpx;
  181.         // background-color: #ffabcd;
  182.         // border-bottom: 2rpx solid #CBD2DA;
  183.         // border-bottom-color: rgba(203, 210, 218, 0.2);
  184.         display: flex;
  185.         justify-content: space-between;
  186.         align-items: center;
  188.         .ssi-sort-name {
  189.             display: flex;
  190.             align-items: center;
  192.             .sort_img {
  193.                 width: 43rpx;
  194.                 height: 52.13rpx;
  195.                 padding-top: 10rpx;
  196.                 // width: 36rpx;
  197.                 // height: 47.14rpx;
  198.             }
  200.             .ssi-sort {
  201.                 text-align: center;
  202.                 width: 43rpx;
  203.             }
  205.             .ssi-name {
  206.                 margin-left: 50rpx;
  207.                 font-family: PingFang SC, PingFang SC;
  208.                 font-weight: 400;
  209.                 font-size: 28rpx;
  210.                 color: #313960;
  211.             }
  212.         }
  215.         .ssi-complete-info-arrow {
  216.             display: flex;
  217.             align-items: center;
  219.             .ssi-complete-info {
  220.                 width: 210rpx;
  221.                 height: 37rpx;
  222.                 background: rgba(94, 205, 182, 0.1);
  223.                 border-radius: 8rpx 8rpx 8rpx 8rpx;
  224.                 text-align: center;
  226.                 font-family: PingFang SC, PingFang SC;
  227.                 font-weight: 400;
  228.                 font-size: 24rpx;
  229.                 color: #5EC6A7;
  230.                 margin-right: 15rpx;
  231.             }
  232.         }
  234.     }
  235. }
  236. </style>

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价