uniapp微信小程序自定义手风琴组件

最新推荐文章于 2024-05-16 11:16:56 发布
最新推荐文章于 2024-05-16 11:16:56 发布
阅读量1.6k 收藏 6
点赞数 1
文章标签： 微信小程序 uni-app css vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sama_AA/article/details/128347014
版权

文章目录

一、需求与背景

这边的需求是做一个手风琴样式的列表，需要有手风琴的动画效果，只能展开一个，列表item的个数和列表item内展开的item个数都是未知的（从后端获取的）。
发现uniapp组件提供的手风琴列表没法自定义title的样式（就是列表item中的样式），所以需要自己实现一个。

二、效果

先上效果
是有逐渐展开的动画效果的，懒得放动图
在这里插入图片描述

三、代码

因为我这里元素过多了有点，所以看起来比较复杂，但其实关键代码就是框架上的那几行，分解来看还是很清晰的

1.html部分

<view class="item" v-for="(item,index) in contentList" :key="index">
                <view @tap="handleClick(index)" class="title">
                  <view class="info-box">
                    <view class="up-box">
                      <view class="name-box">{{item.studentName}}</view>
                      <view 
                      v-show="tabIndex == 3"
                      class="flag-box" 
                      :style="{ background: `${item.bgColor}` ,color:`${item.fontColor}`}">
                      {{
                        item.exerciseIntensity === 1
                        ? '适中'
                        : item.exerciseIntensity === 2
                        ? '过量'
                        : item.exerciseIntensity === 3
                        ? '不足'
                        : '未采集'
                      }}</view>
                    </view>
                    <view class="down-box">
                      <view>学号</view>
                      <view style="margin-left:20rpx">{{item.studentCode}}</view>
                      <view class="sex">性别   {{item.studentGender===1?'男':item.studentGender===2?'女':'--'}}</view>
                    </view>
                  </view>
                  <img
                    :class="item.open?'down':'up'"
                    :src="require(`@/static/images/icon/down3.png`)"/>
                </view>
                <view class="p_item"  :style="{maxHeight:(item.open && item.exerciseIntensity!=null) ? maxHeight : 0}">
                  <view @click="toHeart(item,subIndex)"  class="sub-box" v-for="(sub,subIndex) in item.sportTimeSlotDataList" :key="subIndex" >
                    <view class="up-box">
                      <view>
                        {{sub.sportTimeSlotBeginToEnd}}
                      </view>
                    </view>
                    <view class="down-box">
                      <view>最高心率   {{sub.maxHeart}}bpm</view>
                      <view style="margin-left:50rpx">最低心率   {{sub.minHeart}}bpm</view>
                      <view style="margin-left:50rpx">平均心率   {{sub.averageHeart}}bpm</view>
                    </view>
                  </view>
                </view>
              </view>

2.js部分

contentList就画了个关键结构，其他的按需增加即可

data() {
    return {
      maxHeight: 0,//运动量展开那需要的高度
      contentList: [
	      {
		      open:false,
		      sportTimeSlotDataList:[]
	      },
	      {
		      open:false,
		      sportTimeSlotDataList:[]
	      },
	      {
		      open:false,
		      sportTimeSlotDataList:[]
	      },
      ],
    };
  },
  methods: {
	// 获取dom
    getRect(context, selector) {
      return new Promise((resolve) => {
        const query = uni.createSelectorQuery().in(context);
        query
            .select(selector)
            .boundingClientRect((data) => {
              resolve(data);
            })
            .exec();
      });
    },
    handleClick(index) {//运动量
			this.contentList[index].open = !this.contentList[index].open;
			if (this.contentList[index].open == true) {
				for (var i = 0; i < this.contentList.length; i++) {
					if (i == index) {
						this.contentList[i].open = true;
					} else {
						this.contentList[i].open = false;
					}
				}
			}
      this.getRect(this, '.sub-box').then(res => {
        // 加了20是因为每个item有一个margin-top：20，要算进去，不然就没间隔了，所以如果要是改动的话这块也要跟着改
        var elLength=this.contentList[index].sportTimeSlotDataList.length;
        this.maxHeight = ((parseInt(res.height)+20)* elLength).toString() + 'px';
      })
		},
	}

3.css部分

关键在于动画效果：箭头的up、down，还有子item的展开效果p_item
其他的都是按需求来的都可以改

.item {
		display: flex;
    flex-direction: column; //决定了下拉框在下面
    background-color: #fff;
    .title{
      display: flex;
      flex-direction: row;//左部分是信息，右部分是箭头
      justify-content: space-between;
      .info-box{
        display: flex;
        flex-direction: column;//上部分是姓名和运动量特征，下部分是学号和性别
        width:500rpx;
        justify-content:flex-start;
        .up-box{
          display: flex;
          flex-direction: row;
          margin-top:20rpx;//如果这里改了handleClick算高度那里也要改
          align-items:flex-end;
          .name-box{
            font-weight: 500;
            font-size: 26rpx;
          }
          .flag-box{
            margin-left : 15rpx;
            width: 58rpx;
            height: 32rpx;
            font-size: 18rpx;
            text-align: center;
            line-height: 31rpx;
            border-radius: 6rpx;
          }
          .run-box{
            font-size: 26rpx;
            margin-left:25rpx;
          }
          .divider{
          margin-left:25rpx;
          margin-bottom: 5rpx;
          background: #b7b9b3;
	        width: 1rpx;
	        height: 70%;
          opacity: 0.5;
        }
        }
        .down-box{
          display: flex;
          flex-direction: row;
          font-weight: 500;
          height: 40rpx;
          font-size: 22rpx;
          color: #ACB1B5;
          margin-top:10rpx;
          .sex{
            margin-left: auto ;
            margin-right: 230rpx;
          }
        }
      }
      .up {
        margin-top:50rpx;
        width: 20rpx;
        height: 20rpx;
        opacity: 0.3;
        transition: all ease 0.6s;
        transform: rotate(0deg);
      }

      .down {
        margin-top:50rpx;
        width: 20rpx;
        height: 20rpx;
        opacity: 0.3;
        transition: all ease 0.6s;
        transform: rotate(-180deg);
      }
    }
    .sub-box{
      display: flex;
      flex-direction: column;
      background: #F6F6F6;
      border-radius: 20rpx;
      height: 120rpx;
      margin-top:20rpx;
      .up-box{
        display: flex;
        flex-direction: row;
        align-items:flex-end;
        height: 17rpx;
        font-size: 22rpx;
        font-family: Roboto;
        font-weight: bold;
        margin-top:36rpx;
        margin-left: 35rpx;
        .run-box{
          margin-left:25rpx;
        }
        .divider{
          margin-left:25rpx;
          margin-bottom: 5rpx;
          background: #b7b9b3;
	        width: 1rpx;
	        height: 100%;
          opacity: 0.5;
        }
      }
      .down-box{
        display: flex;
        flex-direction: row;
        height: 18px;
        margin-top:22rpx;
        margin-left: 35rpx;
        font-size: 18rpx;
        font-weight: 500;
        color: #000000;
        opacity: 0.5;
      }
    }
  }
  .p_item {
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

参考文章

本实现方法主要参考了以下几个文章
https://blog.csdn.net/tieniuya/article/details/125769153
https://blog.csdn.net/wh20141212/article/details/107565986
https://blog.csdn.net/sriting/article/details/106111020

sama_AA
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uni-app - [全端兼容] 详细实现手风琴折叠展开收起功能效果，容器隐藏显示切换时折叠手风琴效果（提供详细示例代码，一键复制运行起来）
王佳斌
01-30 3811
页面除了主要功能非常干净整洁。本文实现了 uniapp 全端兼容（h5网页 / 小程序 / 安卓苹果app / nvue等）手风琴折叠收起功能效果，附带折叠收起动画过渡效果。如下图所示，您直接复制源代码运行即可！
微信小程序-给列表加上手风琴效果
weixin_34405925的博客
05-26 5497
列表内容的显示和隐藏是十分常见的需求，下面我将介绍如何通过简单的CSS过渡动画来制作列表显隐的手风琴效果~ 先看效果图： 关键点：要实现动画的效果，通过 display:none 控制显隐是不行的，因为这个属性造成的变化效果是瞬间的，所以这里用到的是 transition 属性来指定 heigth 高度变化的过渡效果。 需要用到的示例数据 data: { selected: [false...
uniapp实现手风琴动画（微信小程序可用）
tieniuya的博客
07-13 1805
改一下vue和原生微信小程序就能用，通用的。
uniapp折叠面板，手风琴
最新发布
peepeeman的博客
05-16 328
折叠面板，手风琴，抽屉，下滑
php怎么写评论折叠展开,微信小程序实现折叠展开效果
weixin_36018183的博客
03-12 276
本文实例为大家分享了微信小程序实现折叠展开效果的具体代码，供大家参考，具体内容如下wxml：总数8类别13 展开1类别20展开2类别32展开3类别43展开4展开4右边wxss:/* 列表详情 */.li {background-color: #fff;display: flex;justify-content: space-between;font-size: 34rpx;width: 92%;...
uniapp折叠面板
weixin_49295874的博客
01-26 4410
<uni-collapse> <uni-collapse-item title="标题文字"> <uni-list> <uni-list-item title="标题文字" note="描述信息..." show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '0',type: 'spinner'}" style="padding:10px 0
如何使用uni-app快速成型一个微信小程序（二）
团子窝
03-20 695
正式编码 我们在第一篇文章中已经实现了编码环境的搭建，本章将从实际代码中出发，构造一个查询的小程序 产品目标 我们做一个产品之前，我们要明晰产品的功能和定位，现在要做的产品是一个国家兽药限量数据查询，定位于快速开箱即用，所以我们要开发一个微信小程序来实现这个产品。 页面原型 以下是设计的产品页面原型，我们可以从原型中看到产品具有两个页面 首页——用户进入的首页面，在此页面进行搜索并向具体模块中跳...
uniapp 微信小程序 时间段选择组件
07-24
总之，`uniapp`微信小程序的时间段选择组件涉及到了`uni-app`的基础知识，如组件化开发、数据绑定、事件处理等，同时也涵盖了微信小程序的特定API和自定义样式设计。通过学习和实践，开发者可以构建出符合业务需求、...
uniapp 微信小程序tabbar凸起的显示
08-25
`uniapp`是一个跨平台的开发框架，它允许开发者使用一套代码库来构建多端应用，包括微信小程序。在`uniapp`中处理微信小程序的tabbar凸起效果并确保其不闪烁，是一项技术性工作，涉及到CSS样式、事件处理以及可能的...
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
jQuery实现手风琴效果
08-07
使用jQuery技术实现手风琴菜单和图片的切换效果，简单易懂，清晰明了。 详情可以查看博客：https://blog.csdn.net/fengzhen8023/article/details/81480794
手风琴菜单，仿QQ面板的折叠菜单
07-27
手风琴菜单，仿QQ面板的折叠菜单! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net
微信手风琴两种模式全部显示只显示当前
02-29
微信手风琴两种模式全部显示只显示当前 gif展示在博客里有 https://mp.csdn.net/console/editor/html/104573891
jQuery竖排动画手风琴折叠菜单栏代码.zip
07-04
jQuery竖排动画手风琴折叠菜单栏代码是一款粉红色风格动态伸缩手风琴代码，展开一个另一个自动收缩。
微信下拉小程序效果
11-04
实现了类似与微信的下拉小程序列表功能，ListView的头部隐藏，下拉
微信小程序uniapp日历组件，可以自定义文案，可以上下滑动选择日期
03-01
在这个场景下，我们讨论的是uni-app在微信小程序中的一个关键功能——日历组件。 日历组件在很多应用中都是不可或缺的部分，例如在线预订、行程规划等。在uni-app中，开发一个具备自定义文案和上下滑动选择日期功能...
Uniapp微信小程序自定义Navbar
09-04
Uniapp框架的针对微信小程序的自定义Navbar代码。直接复制粘贴内容，然后配置好page.json。就可以直接查看效果。
详细vue实现手风琴效果
lwf0829的博客
11-22 974
利用鼠标移入移出事件实现内容出现隐藏 用到的知识点： 1.@mouseover 鼠标移入事件 2.@mouseout 鼠标移出事件 3.v-if 条件渲染 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 简单样式设置 --> <style type="text/css"> * {
uniapp微信小程序 自定义组件
08-18
UniApp 是一个基于 Vue.js 的跨平台开发框架，可以用来开发微信小程序、H5、App等多个平台的应用。在 UniApp 中，可以通过自定义组件来实现对小程序的扩展和复用。 要创建一个自定义组件，可以按照以下步骤进行： 1. 在 UniApp 项目的 `components` 目录下创建一个新的文件夹，用于存放自定义组件的相关文件。 2. 在该文件夹下创建一个 `.vue` 文件，作为自定义组件的入口文件。 3. 在入口文件中定义组件的模板、样式和逻辑代码。 4. 在需要使用自定义组件的页面或组件中，引入并使用该自定义组件。 下面是一个简单的示例，演示如何创建一个自定义组件： 1. 在 `components` 目录下创建一个名为 `my-component` 的文件夹。 2. 在 `my-component` 文件夹下创建一个名为 `my-component.vue` 的文件，作为自定义组件的入口文件。 3. 在 `my-component.vue` 文件中编写如下代码： ```html <template> <view class="my-component"> <text>{{ message }}</text> </view> </template> <script> export default { name: 'MyComponent', props: { message: { type: String, default: '' } } } </script> <style scoped> .my-component { color: red; } </style> ``` 4. 在需要使用自定义组件的页面或组件中，引入并使用该自定义组件。例如，在某个页面的 `.vue` 文件中： ```html <template> <view> <my-component message="Hello World"></my-component> </view> </template> <script> import MyComponent from '@/components/my-component/my-component.vue' export default { components: { MyComponent } } </script> ``` 这样，就可以在页面中使用名为 `my-component` 的自定义组件了。 需要注意的是，自定义组件的文件夹和文件名可以根据实际情况进行命名，但要保持一致性。另外，自定义组件中的样式可以使用 `scoped` 关键字来实现样式的隔离，避免与其他组件的样式冲突。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值