前言:本章说下文字内容的展开与收起的实现,要实现这么一个效果:当收起的时候隐藏并显示省略号,当展开的时候显示全部文字。
GitHub:https://github.com/Ewall1106/miniProgramDemo
先看下效果图:
小程序 — 展开/收起
1、结构样式
(1)首先我们定义一下html结构:
(2)less样式:
标题 title
就是一个简单的flex布局; 内容 content
中的文字我们默认收起状态且只展示两行
2、添加点击事件
(1)首先我们应该在 data
中定义一个变量 isShow
用来控制样式的切换,默认为收起状态(即不展示)。
(2)在箭头icon上添加一个点击事件,当点击的时候对 isShow
做取反操作;
3、样式动态切换
(1)首先是image箭头图片的切换(注意是如何动态的切换本地图片的)
(2)然后我们定义一个展开的样式,根据isShow的状态值动态的切换样式
.content.on {
display: block;
text-overflow: clip;
overflow: visible;
}
4、小结
这样我们就实现了文本框的展开/收起效果,当收起的时候显示省略号并隐藏,当展开的时候展示全部文字。
当然,不仅仅是文字的收起与展开,里面放其它的内容也是可以的,根据需求来应对了;还有就是可以加个动画之类的完善一下交互效果,感兴趣的朋友可以自己鼓捣。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/weapp/30002.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。