html5怎么实现展开收起,小程序 — 展开/收起
前言:本章说下文字内容的展开与收起的实现,要实现这么一个效果:当收起的时候隐藏并显示省略号,当展开的时候显示全部文字。
GitHub:https://github.com/Ewall1106/miniProgramDemo
先看下效果图:
小程序 — 展开/收起
1、结构样式
(1)首先我们定义一下html结构:
标题标题
我所有的自负皆来自我的自卑,所有的英雄气概都来自于我的软弱。嘴里振振有词是因为心里满是怀疑,深情是因为痛恨自己无情。这世界没有一件事情是虚空而生的,站在光里,背后就会有阴影,这深夜里一片寂静,是因为你还没有听见声音。
内容摘抄至马良《告坦白书》中我一段喜欢的文字。
(2)less样式:
标题title就是一个简单的flex布局;
内容content中的文字我们默认收起状态且只展示两行,更多css技巧:CSS日常踩坑后的总结
.container {
.title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 25rpx;
.title_txt {
font-size: 34rpx;
color: #2b2b2b;
}
.title_icon {
display: block;
width: 21rpx;
height: 11rpx;
}
}
.content {
height: 80rpx;
overflow: hidden;
text-overflow: ellipsis;
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
padding: 0 25rpx;
font-size: 30rpx;
color: #888888;
}
}
(3)这样我们就实现了一个默认布局样式
收起状态
2、添加点击事件
(1)首先我们应该在data中定义一个变量isShow用来控制样式的切换,默认为收起状态(即不展示)。
data = {
isShow: false
};
(2)在箭头icon上添加一个点击事件,当点击的时候对isShow做取反操作;
toggle() {
this.isShow = !this.isShow;
this.$apply();
}
3、样式动态切换
(1)首先是image箭头图片的切换(注意是如何动态的切换本地图片的)
(2)然后我们定义一个展开的样式,根据isShow的状态值动态的切换样式
我所有的自负皆来自我的自卑,所有的英雄气概都来自于我的软弱。嘴里振振有词是因为心里满是怀疑,深情是因为痛恨自己无情。这世界没有一件事情是虚空而生的,站在光里,背后就会有阴影,这深夜里一片寂静,是因为你还没有听见声音。
.content.on {
display: block;
text-overflow: clip;
overflow: visible;
}
4、小结
这样我们就实现了文本框的展开/收起效果,当收起的时候显示省略号并隐藏,当展开的时候展示全部文字。
当然,不仅仅是文字的收起与展开,里面放其它的内容也是可以的,根据需求来应对了;还有就是可以加个动画之类的完善一下交互效果,感兴趣的朋友可以自己鼓捣。
html5怎么实现展开收起,小程序 — 展开/收起相关推荐
- html5怎么实现展开收起,小程序实现展开/收起的效果示例
前言:本章说下文字内容的展开与收起的实现,要实现这么一个效果:当收起的时候隐藏并显示省略号,当展开的时候显示全部文字. 先看下效果图: 小程序 - 展开/收起 1.结构样式 (1)首先我们定义一下ht ...
- 微信小程序 - 展开收缩列表
代码源自于:微信小程序示例官方 index.wxml 1 <block wx:for-items="{{list}}" wx:key="{{item.id}}&qu ...
- 微信和html5的使用感觉,微信小程序和HTML5相比有何不同呢?
小程序和H5有哪些不同?自从小程序面世以来,大家一直将小程序与HTML5来进行对比,大家对小程序也一直褒贬不一,很多人都觉得HTML5(下文简称H5)比较方便,毕竟小程序只能在微信中使用,而H5可以在 ...
- 实时视频直播客户端技术盘点:Native、HTML5、WebRTC、微信小程序
1.视频直播客户端技术之Native APP 原生 APP 终端音视频引擎的结构框图如下,基本包括了音频引擎.视频引擎和网络传输,合称实时语音视频终端引擎.这里还包含底层的音视频采集和渲染,还有网络的 ...
- html5 2d小游戏,cax: HTML5 Canvas 2D Rendering Engine - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎...
Cax 小程序.小游戏以及 Web 通用 Canvas 渲染引擎 微信小游戏 特性 Learn Once, Write Anywhere(小程序.小游戏.PC Web.Mobile Web) Writ ...
- 微信小程序 列表收起与展开效果
首先,先看下效果吧,就放两张图片看下吧 第一张图就是原页面了,然后点击 "收起" ,效果就是第二张图的样式了.再点击 "展开" 的时候就会变成第一张图的样子了. ...
- 微信小程序展开收起通讯录列表
<view class="mail_content kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}&qu ...
- uniapp 开发小程序展开更多与收缩的动画效果
效果图: html <view> <view >公告</view><view @click="showMore"> {{isShow ...
- html5 lob,GitHub - LobbL/cax: HTML5 Canvas 2D Rendering Engine - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎...
English | 简体中文 Cax HTML5 Canvas 2D Rendering Engine Features Simple API, Lightweight and High perfor ...
最新文章
- 分布式架构 springcloud+redis+springmvc+ springboot
- Vue3入门笔记—2022年1月9日
- Spring MVC,Ajax和JSON第1部分–设置场景
- 数据在市场运营中的应用
- 这个保守的 RNA motif是病毒侵染的关键
- 无法连接iphone软件更新服务器_NX许可证错误:无法连接至许可证服务器系统。SPLM_LICENSE_SERVER错误[15]...
- WLAN定位技术——(无线信号定位2)
- Spring实战之Cache
- 谁该为马化腾表态这个乌龙尴尬?
- 移动通信基础(4)信道模型
- 排序算法(2)冒泡排序
- win10红警2黑屏_在windows 10中完美的运行《命令与征服·红色警戒2+尤里的复仇资料片...
- 正态性检验中的统计量D值和统计量W值如何计算?
- 部分国内外遥感与GIS杂志(小百合)
- 趋势预测方法(五)Holt-Winters模型_时序递推预测
- oracle的 listagg() WITHIN GROUP () 函数使用
- C++中的防卫式声明
- 移动支付“车水码龙”,但也小心“塞翁失码”
- MATLAB模拟陀螺仪的运动轨迹(附完整代码)
- Android基于环信SDK开发IM即时聊天(一)
热门文章
- 【C#】Winform监听USB串口设备拔插
- 03_nand 闪存特性
- Android应用程序注册广播接收器 registerReceiver 的过程分析
- 【C#】解决MouseHook捕获鼠标动作,在有些电脑上SetWindowsHookEx失败返回0的问题
- ethereum rpc
- linux操作系统面试题大全
- 考研数学 张宇 —— 三重积分笔记(第十八讲 [1] 手写记录)
- 偏差与方差、经验风险最小化、联合界、一致收敛—机器学习公开课第九讲
- “唛盟研发管理平台”荣获2022年中国创交会“最具投资价值成果奖”
- 玲珑杯oj-1126咸鱼旅行