本章讲的是展开和折叠文字内容的实现，从而达到这样的效果：折叠时隐藏显示省略号，展开时显示所有文字。

https://github.com/Ewall1106/miniProgramDemo

先看效果图：

小程序-展开/折叠

1.结构形式

(1)首先，我们定义html结构：

View class=' container ' View class=' title ' text class=' title _ txt ' title/text image class=' title _ icon ' src=' http :/assets/images/arrow _ up . png '/View View class=' content '我所有的自负来自于我的自卑，我所有的英雄主义来自于我的软弱。我口若悬河是因为心中充满疑惑，我的深情是因为痛恨自己的无情。这个世界上没有什么是白生的。当你站在光明中，身后会有阴影。半夜是寂静的，因为你还没有听到声音。/view/view摘自马良《告坦白书》中的一篇喜爱的文字。

(2)少风格：

标题标题是简单的flex布局；默认情况下，内容内容中的文本是折叠的，只显示两行。容器{。title { display: flexflex-direction : row；justice-content :空格；align-items:居中；padding: 25rpx。title _ txt { font-size : 34 rpx；color: # 2b2b2b} .title _ icon { display:块；宽度： 21 rpx；height: 11rpx} } .内容{ height: 80rpx飞越：隐藏；文本-overflow:省略号；text-overflow :-o-省略号-last line；display :-web kit-box；-web kit-line-clamp : 2；-web kit-box-oriented :垂直；padding: 0 25rpxfont-size : 30 rpx；color: # 888888}}(3)这样，我们实现了一个默认的布局样式

折叠状态

2.添加点击事件

(1)首先我们要在数据中定义一个变量isShow来控制样式切换，默认值是折叠的(即不显示)。

数据={ isshow : false }；(2)在箭头图标上添加一个点击事件，点击时在isShow上做反操作；

toggle() { this.isShow=！this.isShow这个。$ apply()；}3.动态样式切换

(1)首先是图像箭头图片的切换(注意如何动态切换本地图片)

image class=' title _ icon ' src=' http : { { IsShow ' '/assets/images/arrow _ down . png ' : '/assets/images/arrow _ up . png ' } ' @ tap=' toggle '/(2)然后我们定义一个展开的样式，并根据isShow的状态值动态切换样式

view class='content {{isShow ' '关于' : ''}} '我所有的自负都来自于我的自卑，我所有的英雄主义都来自于我的软弱。我口若悬河是因为心中充满疑惑，我的深情是因为痛恨自己的无情。这个世界上没有什么是白生的。当你站在光明中，身后会有阴影。半夜是寂静的，因为你还没有听到声音。/view . content . on { display : }块；文本溢出：剪辑；飞越：可见；}4.摘要

这样，我们就实现了展开/收缩文本框的效果，收缩时显示省略号并隐藏，展开时显示所有文本。

当然不仅仅是文字的折叠和展开，还有里面的其他内容，都是根据需要来处理的；还有，可以加一个动画之类的来提高互动效果，感兴趣的朋友可以自己鼓起来。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。