前言

官方文档没有提供说明，就研究源码，终于花了半上午的时间，找到了一种方法，可能不是很好用，但也可以用

一、源码

主要是这个方法，这个方法是用来改变折叠面板子组件收起还是展开的，就根据这个方法来实现一键收起

二、方法

1.部分代码

这仅是部分代码，不全，可以参考官方示例，这里用到了手风琴效果

<uni-collapse accordion v-model="sel"><uni-collapse-item ref='one' name='one' title="个人信息" :disabled="!hasLogin"></uni-collapse-item><uni-collapse-item ref='two' name='two' title="手风琴效果" :disabled="!hasLogin"></uni-collapse-item>
</uni-collapse>

初始值设置

sel: '',

直接粘贴到一个方法里面即可

switch (this.sel) {case 'one':this.$refs.three.onClick(false);break;case 'two':this.$refs.two.onClick(false);break;case 'three':this.$refs.three.onClick(false);break
}

2.原理

代给 uni-collapse-item 一个ref 通过 this. r e f s 调用可以直接使用 u n i − c o l l a p s e − i t e m 的一些方法、属性，通过 t h i s . refs 调用可以直接使用 uni-collapse-item 的一些方法、属性，通过 this. refs调用可以直接使用uni−collapse−item的一些方法、属性，通过this.refs.three.onClick(false); 调用onClick方法，实现收起单个 uni-collapse-item
由于使用了手风琴效果，所以只会有一个展开，通过switch判断哪一个展开了，在折叠起来

总结

通过研究源码实现了收起单个 uni-collapse-item 的方法，也可以传递 true 给onClick 实现单个 uni-collapse-item 展开，具体灵活使用

uniapp collapse 一键收起相关推荐

uniapp手机号一键登录
uniapp手机号一键登录先讲几个坑避免操作完以后会出bug无效喷我部分机型会因为第一次在手机上编译普通基座无法触发手机号一键登录的弹框,这里当然是重启了,重启可以解决百分之八十的问题!!! 然后 ...
php 一键电话功能,uniapp手机号码一键登陆功能实现
HBuilderX 3.0+版本,新增一键登录,运营商网关认证,免短信验证获取手机号:刚好最近开发项目有应用上,简单分享一下! 1.开通uniapp的"一键登录"权限在minif ...
【uni-app】uniapp 实现一键登录超详细记录~
uniapp 实现一键登录一. 前置条件: 开通uniCloud, 开通一键登录功能二. 一键登录代码 & 云函数代码三. 其他条件四. 遇到过什么问题, 如何处理(本地函数同个局域网 ...
uniapp微信一键登录微信授权
前言现在小程序逐渐成为主流,常用的微信授权登录很重要很常见的一个功能,今天自己总结了一下. 准备工作 1.如果你想自己想试一下这个功能首先你需要有一个开发中的项目并且你在开发成员里面. 2.配置自己 ...
uni-app手机号一键登录
提示:手机号一键登录有两种方式. 第一种通过调用自有服务器,然后服务器调用云函数登录. 第二种可以前端直接调用云函数进行登录(暂不介绍). 提示:在我的项目中使用的是自由服务器登录,下面的案例可供参考 ...
uniapp微信一键登录
详细步骤: 1. 安装uni-login插件打开HBuilderX,点击左侧工具栏里的"插件市场",在搜索框中输入"uni-login"进行搜索,找到该插件并 ...
uni-app - 文本展开 / 收起折叠功能，支持自定义样式（当文本内容超出规定行数后，展开收起折叠的功能）兼容 H5 / App / 小程序且易用更容易修改的插件组件源码，超详细的示例代码及注释
前言网上的组件和教程代码都太乱了,根本无法按照自己的需求修改,而且基本上都有兼容性和功能性 BUG. 本文实现了多行文本展开与折叠组件,灵活性非常高,只完成了核心功能,可随意自定义样式满足您的需求 ...
uniapp手机一键登录，微信授权登陆
之前前端可以通过微信的接口获取openid,现在不允许了,所以把code传给后端后端反数据给我们, <template><view class="content yd-ce ...
uniapp前端 “一键换色“ 的几种方案
现在越来越多的网站都提供了更换主题功能,如ElementUI,既是为了迎合用户需求,或是为了凸显自己特点,因此提供了个性化定制功能. 最近刚好做了这个功能,主要通过以下几种方式实现: CSS样式覆盖 ...

uniapp collapse 一键收起

文章目录

前言

一、源码

二、方法

1.部分代码

2.原理

总结

uniapp collapse 一键收起相关推荐

最新文章

热门文章